在网页制作的过程中，我们有时候根据特殊的需求，会将网页的整体或局部编程灰色，一般应用在哀悼日、活动过期等需求上，这个时候，如果重写css样式，则显得臃肿。今天余斗给大家推荐几种全局css代码，专门用于将网页界面变成黑白灰色调，大家根据自己的具体情况选取：
一、全局外部样式
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}
二、内部样式（写入头部head标签里面）
<style type="text/css">
<!--
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
-->
</style>
三、内联式（写入html标签）
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">
四、QQ群空间版，针对大部分主流浏览器（写入.css文件）
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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
注意的是，以上css代码都是运用于全局，大家若是想要运用到局部界面，可以直接写到对应的class类名中即可。
套路很深，不支持下载！
