CSS样式,文字和图片全局置灰

今年清明节,举国哀悼,很多网站文字图片都是置灰的,之前以为图片都是重新切的,但是比如腾讯视频里面的页面都是灰色的,总不能一个个的切图吧,后来才知道这么简单。

比如下面就是在维护的一个后台页面,导航条是黄色的

CSS样式,文字和图片全局置灰_第1张图片

弄成灰色的效果如下图:

CSS样式,文字和图片全局置灰_第2张图片

只要设置一个CSS样式即可

html {
        filter: grayscale(1);
    }

如果需要兼容其他主流浏览器(不包括IE)

html {
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -ms-filter: grayscale(1);
        -o-filter: grayscale(1);
        filter: grayscale(1);
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); //css滤镜代码
    }

最后实测,IE11确实没生效

你可能感兴趣的:(CSS)