CSS 实现整站黑白色调

今天,我国举行新中国成立以来第四次全国性哀悼活动。为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院决定,2020年4月4日举行全国性哀悼活动。在此期间,全国和驻外使领馆下半旗志哀,全国停止公共娱乐活动。4月4日10时起,全国人民默哀3分钟,汽车、火车、舰船鸣笛,防空警报鸣响。

打开各大网站(百度、高德、腾讯、公安部、又拍云、腾讯云、CSDN、Halo ……),几乎打开什么都是黑白的,当然,本站也是黑白的。

那么如何实现整站黑白色调呢,在全局 <head> </head> 标签内插入以下代码即可:

<style> 
    html { 
        -webkit-filter: grayscale(100%); 
        -moz-filter: grayscale(100%); 
        -ms-filter: grayscale(100%); 
        -o-filter: grayscale(100%); 
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
        _filter:none; 
    } 
</style>

filtercss 中的滤镜属性,filter: grayscale 就是给页面增加一层灰度的滤镜。

不过这个滤镜对 ChromeSafari 浏览器是无效的,所以需要 -webkit-filter: grayscale(100%); 这是针对 webkit 内核浏览器的。

# CSS 
最后编辑于 2020-04-04 08:00:00

本文由 Neves 创作 & 原文链接:https://7core.cn/archives/cssgrayscale.html
采用 知识共享署名-非商业性使用-相同方式共享 CC 4.0 BY-NC-SA 国际许可协议进行许可。
本站文章除注明出处 / 转载外,均为本站原创或翻译,转载请附上本声明。

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×