css样式设置图片 |css元素隐藏

css 居中悬浮，好看的css书，css3 弹性效果，html css做华为商城，css input 选中边框颜色改变，CSS写双柱状图，css元素隐藏 css样式设置图片 |css元素隐藏

img {
width: 500px; /*设置图片宽度*/
height: 300px; /*设置图片高度*/
margin: 10px; /*设置图片四周的边距*/
border: 2px solid #ccc; /*设置图片边框*/
float: left; /*使图片左浮动*/
}

上述代码中的img是CSS中的图片选择器，可以用它来选择要设置的图片。通过width和height属性可以设置图片的宽度和高度，margin属性用于设置图片周围的边距，border属性设置图片的边框，float属性使图片左浮动。

div {
background-image: url("image.jpg"); /*设置背景图片*/
background-repeat: no-repeat; /*不重复背景图片*/
background-position: center; /*设置背景图片位置*/
height: 500px; /*设置div高度*/
width: 100%; /*设置div宽度*/
}

如果想将一个图片作为背景，可以使用CSS中的背景属性。通过background-image属性可以设置背景图片的路径，background-repeat属性设置背景图片是否重复，background-position属性设置背景图片的位置。

img:hover {
opacity: 0.5; /*设置图片鼠标悬停时的透明度*/
cursor: pointer; /*设置鼠标悬停的光标样式*/
}
img:active {
transform: scale(0.9); /*设置图片鼠标按下时的缩放效果*/
}

为了让图片更有交互性，可以使用CSS中的伪类选择器。上述代码中，使用:hover伪类选择器来设置当鼠标悬停在图片上时的效果，使用:active伪类选择器来设置当鼠标按下时的效果，其中opacity属性用于设置透明度，cursor属性用于设置鼠标悬停时的光标样式，transform属性用于设置缩放效果。