Oracle 系统管理 - Linux 系统 - Backtrack 5 - 安全 - Juniper 技术 - Cisco 技术 - 思科模拟器 - Cisco 认证 - Cisco ios 下载

您现在的位置是:Docker > Python运维 > css滤镜遮罩实现网页变黑白 变灰色

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

时间:2018-06-29 10:31  来源:未知  阅读次数: 复制分享 我要评论

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

 

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 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
相关资讯