将网站页面变灰的CSS代码

代码如下，添加到CSS中：

 

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(desaturate.svg#grayscale);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

 

在这个样式代码中，涉及到了一个文件，就是desaturate.svg，从文件扩展名中可以看到，利用到了SVG技术了，代码如下：

 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<filter id="grayscale">
<feColorMatrix 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" type="matrix" />
</filter>
</svg>

 

需要将这代码保存为desaturate.svg，再通过url链接就可以了，十分简单。需要将desaturate.svg的路径指定正确，否则FF中不起作用。

 

在前面看到的是在html中增加了样式，影响页面中所有的元素，如果有需要的话，可以单独设置一个公共库中的类名来调用，如：

 

.pic_gray {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(desaturate.svg#grayscale);
    filter: gray;
    -webkit-filter: grayscale(1);
}

 

这样操作的话，可以让某个区域变成灰色，一切尽在你的掌握。