网站全灰CSS

闲来逛论坛发现的，分享代码的作者是安迪。

---

1.代码

将这段代码放置页首

<style>
html{
-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>

效果如下：

2.注释

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);

浏览器兼容
–moz 代表 firefox 浏览器私有属性。
-ms 代表 IE 浏览器私有属性。
-webkit 代表 chrome、safari 私有属性。
-o 代表 opera 浏览器私有属性。

filter: grayscale(100%);

 

调整元素的灰度值

将图像转换为灰度图像，值定义转换的比例。

值为100%则完全转为灰度图像，值为0%图像无变化。

值在0%到100%之间，则是效果的线性乘子。

若未设置，值默认是0。