CSS网页变灰效果

滤镜函数

设置在html节点，则应用于全局。

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

复合函数

组合任意数量的函数来控制渲染。

filter: contrast(175%) brightness(3%)

兼容性

除IE外，其他的PC、手机端的浏览器都支持，Firefox的 PC、安卓端还单独对SVG图像加了支持。

filter参数

• url：设置一个SVG滤镜
• blur：高斯模糊
• brightness：给图片应用一种线性乘法，使其看起来更亮或更暗
• contrast：调整图像的对比度
• drop-shadow：给图像设置一个阴影效果
• opacity：转化图像的透明程度
• sepia：将图像转换为深褐色
• grayscale：灰色图像

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter