Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
to gray, for Ya'An, Si Chuan earthquake
# 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,<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'/>#grayscale"); /Firefox/

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

Good, Thank you!

Owner

hydra35 commented Apr 21, 2013

@itchina110 thanks! update the original to support firefox

hi500 commented Apr 21, 2013

mark

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

feythin commented Apr 21, 2013

mark

一种玩法,记载下

这样子方便多了啊

isfull commented Apr 21, 2013

mark

wjcody commented Apr 21, 2013

mark 很不错

Yi-Lyu commented Apr 21, 2013

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

@ghost

ghost commented Apr 21, 2013

第12行最好修改为:

}</style></head>';

mark

livmx commented Apr 21, 2013

mark

very good, thanks!

不错

sgsheg commented Apr 22, 2013

mark

good!

yangg commented Apr 22, 2013

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

马克一下,多谢

有意思。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment