css中filter（滤镜）语法属性总结 一行css代码让图片变黑白

css中的filter属性，中文译为"滤镜"，顾名思义它可以设置图片的饱和度、对比度、透明度、黑白效果等可视效果。下面就给大家详细讲解总结一下css滤镜的使用语法。

灰度效果

filter一行代码让图片变灰，通常适用在hover事件。

img{
-webkit-filter:grayscale(100%);
filter:grayscale(100%);
/*将图片设置为黑白模式*/
}

0%-100%为属性值，也可以用0-1来表示。

高斯模糊

img {
    -weikit-filter: blur(5px);
    filter: blur(5px);
/*设置5像素点的高斯模糊*/
}

给图像设置高斯模糊效果，"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 值越大越模糊；如果没有设定值，则默认是0。

透明度

img {
    -webkit-filter: opacity(10%);
	filter: opacity(10%);
}

这个opacity属性在网站中比较常见，转化图像的透明程度。值在0%-100%之间，值为0时为全透明不显示。也可直接写为opacity:0.1;

其他效果

下面一些属性相对比前面三个没那么常见，也给大家整理出来。

filter:sepia(%);   /*将图像转换为深褐色*/
filter:saturate(%);   /*转换图像的饱和度*/
filter:invert(%);    /*反转输出图像*/
filter:hue-rotate(deg);    /*色相旋转*/
filter:contrast(%);    /*对比度*/
filter:brightness(%)    /*图片亮度*/
filter:drop-shadow(h-shadow v-shadow blur spread color);   
 /*图像阴影效果 例如：filter:drop-shadow(5px 5px 10px black);*/

大家可以自己建一个html自行测试，记住上面的代码，在网站开发的时候可以带来帮助！

总结

前端是编程中最容易入门的，小编也是最近刚毕业入行前端开发行业，后面会记录一些比较实用的前端小技巧，志同道合的朋友们可以一起学习交流，大佬也不要喷。雪花博客前端技术交流QQ群：477805319