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

发生重大哀悼事件时候，很多网站都将网站变灰色以示哀悼。在此美文苑给大家总结了两种CSS网页变灰色代码方法，分享给大家。下面分享本站常用的方法加入到公共JS里面。新建个common.js，代码如下：

1. var root = document.getElementsByTagName('html')[0]; 
2. root.style.cssText = "-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);"; 

然后需要使用的网站直接引入，

1. document.writeln('<script type="text/javascript" src="您的路径地址/common.js"></script>'); 

2，在CSS文件里面，兼容写法

1. html { 
2. -webkit-filter: grayscale(100%); 
3. -moz-filter: grayscale(100%); 
4. -ms-filter: grayscale(100%); 
5. -o-filter: grayscale(100%); 
6. filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
7. _filter:none; 
8. } 

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

1. html{ 
2. -webkit-filter: grayscale(100%); 
3. -moz-filter: grayscale(100%); 
4. -ms-filter: grayscale(100%); 
5. -o-filter: grayscale(100%); 
6. filter: grayscale(100%); 
7. 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'></fecolormatrix></filter></svg>#grayscale"); 
8. filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
9. }