哀悼日-网站变灰色代码

2022-11-29 本文已影响0人天堑

方法一：

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"));
  }