CSS代码实现网站变成全灰色

6月 7日, 2015 (6月 7日, 2015) 互联网次访问

为了表示对重庆东方之星客轮长江翻沉事故中遇难者哀悼，腾讯网整个网站显示成全灰色。看了下腾讯网的源代码，实现很简单，在CSS样式表中加入全局webkit-filter: grayscale灰度值即可，同时考虑不同浏览器的兼容性。
CSS代码如下：

<style>
body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
filter:gray; /*ie9- */

}
</style>

以本站为例，100%灰度效果如下：

CSS代码实现网站全灰度显示

#log

CSS代码实现网站变成全灰色

评论