听起来是不是不可思议？但是真的是一行代码就可以实现的，我是在无意之间发现了这个神奇的代码，在这里分享给大家，也感谢那些无私的大神分享。
html {
-webkit-filter: grayscale(.95); //filter CSS 属性.
}
什么filter CSS 属性呢？
是将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。简单的说就是通过 filter 样式改变了图片、颜色、模糊、对比度等等信息
注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。
为了兼容所有可能出现的浏览器，我们可以这样兼容写：
html {
-webkit-filter: grayscale(95%);
-moz-filter: grayscale(95%);
-ms-filter: grayscale(95%);
-o-filter: grayscale(95%);
filter: grayscale(95%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=0.95);
}
浏览器支持
图片.png
注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。
除了grayscale，还有很多其他的属性值，可以动手试试。
比如这里如果我们可以使用 blur 设置高斯模糊，用法如下：
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
图片使用高斯模糊效果如下：
图片.png
各个用法介绍大家可以参考菜鸟教程的文档说明：https://www.runoob.com/cssref/css3-pr-filter.html
如果有什么不懂或者不清楚的地方欢迎私信哦，让我们共同学习，共同进步吧。
u=1719002872,3076810538&fm=26&gp=0.jpg
