网页整体置灰

在某些情况下,网页会置灰,置灰方法如下:

// 为了不修改原来的css样式,可以在根标签加入以下样式
<style type="text/css">
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}

</style>

filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。简单来说，filter 属性就是用来给元素添加不同的滤镜。该属性中支持传入多种 Filter 函数，其中 grayscale() 函数就是用于置灰的关键。grayscale() 函数将改变输入图像灰度，该函数有一个参数，表示转换为灰度的比例。当值为 100% 时，完全转为灰度图像；当值为 0% 时图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。

// 兼容性代码
html{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}
-webkit-filter：带有 webkit 前缀可以在 webkit 内核的浏览器中生效；
-moz-filter：带有 moz  前缀可以在 Firefox 浏览器中生效；
-ms-filter：带有 ms 前缀可以在 IE 浏览器生效；
-o-filter：带有 o 前缀可以在 Opera 浏览器生效；
最后三行都是为了兼容 IE 内核的浏览器。