分享CSS网页变灰色的代码方法

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：css教程

要将CSS网页变灰色，可以使用以下代码： ```css body { filter: grayscale(100%); } ``` 这段代码将网页中的所有元素都变为灰色。其中，`filter: grayscale(100%);`表示将元素以灰度模式显示，数值100%表示完全转换为灰度。如果想要保留部分颜色，可以调整该数值。例如，将数值设置为50%，则网页中的元素将以半灰度显示。

发生重大哀悼事件时候，很多网站都将网站变灰色以示哀悼。在此菜鸡源码给大家总结了两种CSS网页变灰色代码方法，分享给大家。

CSSfilter方法

直接写在BODY里面，只需要将CSS代码：filter: grayscale(100%);放到body元素里面。如下图所示：

<bodystyle="filter:grayscale(100%);">

或者写在CSS文件里面，兼容写法

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

简洁的写法

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

CSSgrayscale方法

直接在网站的CSS样式文件中加入下面的代码，这样不用改html代码。

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

或者使用下面的代码，兼容写法推荐上面的代码

html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:url("data:image/svg+xml;utf8,<svgxmlns=\'http://www.w3.org/2000/svg\'><filterid=\'grayscale\'><fecolormatrixtype=\'matrix\'values=\'0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010\'></fecolormatrix></filter></svg>#grayscale");filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

简洁写法

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