一行 CSS 代码实现整个网站网页变黑白灰的效果

最新推荐文章于 2022-12-05 12:13:17 发布

piaoyecanfeng

最新推荐文章于 2022-12-05 12:13:17 发布

阅读量564

点赞数

分类专栏： css 文章标签： css html javascript

本文链接：https://blog.csdn.net/piaoyecanfeng/article/details/128120151

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

背景
在全国哀悼日（吊念伟人、重大事件），可以把网站编程黑白以示哀悼。下面一行代码实现整个网站网页编程黑白灰色的效果，主要是通过修改 CSS 的方式实现的（如果想要全站去彩色、最好放到基础公共的css文件中全局引用）
第一种：在css文件中

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

第二种：如果你不想修改css，可以在网页与中使用如下代码

<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>

第三种：使用标签加入内联样式

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">

第四种：修改css

<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>

第五种：如果您的网站是通过wordpress搭建的，在主题根目录下的样式底部添加

body {
    -webkit-filter: grayscale(100%); /* webkit */
    -moz-filter: grayscale(100%); /*firefox*/
    -ms-filter: grayscale(100%); /*ie9*/
    -o-filter: grayscale(100%); /*opera*/
    filter: grayscale(100%);
}