通过css滤镜遮罩实现网页变黑白 变灰色

关键字: 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

  • Unique Post

1 评论

云飞进行回复 取消回复

邮箱地址不会被公开。 必填项已用*标注

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。