.box,.box2 { width:450px; height:280px; border:1px solid #ccc; float:left; } .box2 { filter:grayscale(100%); /*实现图片滤镜的效果*/ } img { width:100%; height:100%; } .btn { width:100px; height:280px; float:left; } .btn span { display:block; line-height:280px; font-size:12px; text-align:center; }
css3支持很多种滤镜,通过css3滤镜,我们可以制作出类似photoshop的滤镜效果。例如为图片制作模糊效果,阴影效果,滤色效果等。其中的grayscale()滤镜用于将图片转换为灰度图片
filter: grayscale(100%); /*实现图片滤镜的效果*/