让网站变灰的css代码实例

　css的功能已经比较完善，简简单单的就要可以让网站变成灰色，但是，你自己会做吗？下面的是小编为大家搜集的让网站变灰的css代码实例，供大家参考。

　　让网站变灰的css代码实例1

　　方法1：支持IE

　　html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

　　说明：此方法支持IE，不支持Firefox和Chrome等非IE内核浏览器。

　　方法2：支持IE

　　body {filter:gray}

　　说明：此方法支持IE，不支持Firefox和Chrome等非IE内核浏览器。

　　提示：虽然这个方法代码量最小，但是效果却不好，而且网页也比较卡。

　　方法3：同时支持IE和Chrome

　　html {overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}

　　说明：此方法支持IE浏览器、Safari和Chrome等浏览器，但是不支持Firefox浏览器。

　　最简单地把页面的开始标签中间之间加：

　　style="-webkit-filter: grayscale(100%);"

　　或者修改站点CSS样式

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

　　将上述代码添加加到CSS最顶端就可以实现。

　　为了兼容多种浏览器标准，可以增加一下样式：

　　html {

　　-webkit-filter: grayscale(100%);

　　-moz-filter: grayscale(100%);

　　-ms-filter: grayscale(100%);

　　-o-filter: grayscale(100%);

　　filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

　　_filter:none;

　　如果网站后台无法定义CSS样式，这需要在站点模板页的head标签中间插入style标志位：

　　对于一些老的'网站，为了支持该函数需要修改html标头，将其修改为最新标准标头才可以：对一些使用Flash（不在建议使用）的老站点，起颜色可能也不支持CSS滤镜变灰，则需要在可以在FLASH代码的和之间插入：

　　Nginx代理

　　对于一下没有办法修改源站代码的情况下，也可以在Nginx站点代理无服务器上，通过sub_filter指令来实现。

　　受限确保nginx支持http_sub_module模块，如果不支持需要重新编译安装Nginx，自爱安装时候添加build参数—with-http_sub_module

　　然后在Nginx的http模块增加如下代码：

　　sub_filter '' '';sub_filter_once on;

　　然后nginx -t测试配置正常无误

　　nginx -s reload 重启nginx即可

【让网站变灰的css代码实例】相关文章：