关键字: css代码网页变灰 css代码网页变黑白 nginx网页变灰代码变黑白代码 css滤镜实现页面灰色黑白色效果

1 css代码,支持ie firefox chrome等webkit核心 Opera

html{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-webkit-filter: grayscale(1);
filter: gray; /* For IE 6 - 9 */
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' 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\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
-moz-filter: grayscale(100%); /*待定*/
-ms-filter: grayscale(100%); /*待定*/
-o-filter: grayscale(100%); /*欧朋有什么解决办法?*/
}

2 利用ningx http_sub_module模块把html代码注入http中,不改动web文件实现

来源:https://gist.github.com/hydra35/5426536

# 1. Make sure you have nginx sub module compiled in
# nginx -V  2>&1 | grep --color=always '\-\-with\-http_sub_module'

# 2. add two directives below at HTTP level

# nginx.conf
http {
        # ......

        sub_filter  '</head>' '<style type="text/css">html{ filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' 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\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
} img { _filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0); -webkit-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' 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\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
} </style>';
        sub_filter_once on;

        # ......
}

# 3. nginx -t && /etc/init.d/nginx reload