Html
    Css
    Js

    
                        
.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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3实现图片滤镜效果

css3支持很多种滤镜,通过css3滤镜,我们可以制作出类似photoshop的滤镜效果。例如为图片制作模糊效果,阴影效果,滤色效果等。其中的grayscale()滤镜用于将图片转换为灰度图片

filter: grayscale(100%);   /*实现图片滤镜的效果*/
0