public
Last active

to gray, for Ya'An, Si Chuan earthquake

  • Download Gist
nginx.conf
Nginx
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></head>';
sub_filter_once on;
 
# ......
}
 
# 3. nginx -t && /etc/init.d/nginx reload

filter: url("data:image/svg+xml;utf8,#grayscale"); /Firefox/

会被过滤掉一些代码。这个url里,有解决Firefox的方法:http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

@itchina110 thanks! update the original to support firefox

挺好,我暂时还没有找到合适于Opera的方法。

一种玩法,记载下

这样子方便多了啊

.... 这和在前端页面上加个CSS有个啥区别。。。

第12行最好修改为:

}</style></head>';

very good, thanks!

为什么要写个html,再加个img?一个html,img自动会应用的吧?至少我这里是的

马克一下,多谢

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.