css图片的样式 |php表单提交css

img{
display: block;
max-width: 100%;
height: auto;
margin: auto;
border: none;
}

以上是对图片样式基本的设置方式。其中display的block属性可以让图片占据整个父容器的宽度，max-width:100%可以让图片在保持原有宽高比的前提下自适应屏幕大小，height:auto则是根据图片原有宽高比来自适应高度。同时，为了让图片居中显示，还可以设置margin属性为auto，这样图片就能够保持水平和垂直居中。

img:hover{
opacity: 0.8;
box-shadow: 0px 0px 3px black;
border-radius: 5px;
}

如果想让图片有一些更加细节的样式，可以考虑在其的hover状态下添加一些效果。如上例，大家可以使用opacity属性来让图片半透明，加上box-shadow属性可以给图片描边，并且用border-radius属性为图片添加圆角效果。

img:before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.3);
z-index: 1;
}

作为图片重要的一个元素，作者会在其上方添加一个半透明的遮罩。这个遮罩在hover状态下也会出来，同时把图片部分遮住。如上代码，:before用在img元素的伪元素上，覆盖在其上方，使用的是绝对定位，宽高100%。通过设置z-index属性可以把遮罩层放在图片底层。