用css使网站全局或者局部变黑色 2014-09-24 代码 阅读次数：

现在，不少网站需要用到灰色效果，比如企业站的”友情链接”、”部分案例”、网站底部logo等…
切图是比较简单，保存一张图片就好了。但是…图片要加载、增加了图片数量、更换不方便等等等等…
站在效率的角度来讲，用简单的代码来实现，显然更胜一筹…

1、整站变灰

在全局css文件中，加入以下代码

html {  
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); //IE6以上   
-webkit-filter:grayscale(100%); //支持google、Safari  
}

2、只想针对图片

页面里所有的图片

img{filter:Gray; //IE}  

3、只让指定图片变为灰色

比如logo

.gery{filter:Gray;}  
<img src="logo.gif" class="gery">  

4、如果部分图片变灰

另外一些保留彩色

.nochange {filter:gray(enabled=false);}  
<img src="no.gif" class="nochange" />  

5、让网站中Flash动画变灰

在Flash代码的<object …>和之间插入：

<param value="false" name="menu"/>  
<param value="opaque" name="wmode"/>  

6、使得Firefox变灰的方法

firefox旧版本必须调用grayscale.js来实现，然后在网站头部加入引用：

<script src="grayscale.js" type="text/javascript"></script>  
<script type="text/javascript"> window.onload=function(){grayscale(document.body); } </script>  

然而Firefox新版已支持该滤镜

综上所述，IE6+、FF、google 全兼容完整的代码为：

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

注：相信日常会用FF的朋友，都会进行升级体验，所以grayscale.js的写法不调用，在此只用来拓展学习。