方法一：
html {
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
方法二：
<style type=”text/css”>
html{
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
</style>
有一些站长的网站可能使用这个css 不能生效，是因为网站没有使用最新的网页标准协议。将网页最头部的<html>替换为以下代码：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
方法三：
有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的<object …>和</object>之间插入：
<param value=”false” name=”menu”/>
<param value=”opaque” name=”wmode”/>
方法四：
最简单的把页面变成黑白灰的代码是在head之间：（或CSS文件中 选择器为html或body）
<style type=”text/css”>
html {
filter: gray;/*IE9以下*/
}
</style>
方法五
<style>
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*只支持IE9*/
_filter:none;
}
</style>
PS：这些方法不支持IE，在IE中可以针对性使用IE9来渲染。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1" />
或者使用grayscale.js
window.onload = function(){
var navStr = navigator.userAgent.toLowerCase();
if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){
grayscale(document.body);
grayscale(document.getElementsByTagName("img"));
}
}
则IE部分可以了，但是不支持background的渐变色和:before和:after的背景色
记录人民网用法：
css3上
img{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: url(/img/2013people/gray.svg#grayscale);filter: gray;-webkit-filter: grayscale(1);}
html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: gray;-webkit-filter: grayscale(1);}
js也用上，插入grayscale.js
window.onload = function(){
var navStr = navigator.userAgent.toLowerCase();
if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){
grayscale(document.body);
grayscale(document.getElementsByTagName("img"));
}
网友评论