# 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 |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
itchina110
commented
Apr 21, 2013
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/ |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
itchina110
Apr 21, 2013
会被过滤掉一些代码。这个url里,有解决Firefox的方法:http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
itchina110
commented
Apr 21, 2013
会被过滤掉一些代码。这个url里,有解决Firefox的方法:http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
yuanhaisheng
commented
Apr 21, 2013
Good, Thank you! |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
@itchina110 thanks! update the original to support firefox |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
hi500
commented
Apr 21, 2013
mark |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
itchina110
commented
Apr 21, 2013
挺好,我暂时还没有找到合适于Opera的方法。 |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
feythin
commented
Apr 21, 2013
mark |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
iamsujun
commented
Apr 21, 2013
一种玩法,记载下 |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
Jackpakistan
commented
Apr 21, 2013
这样子方便多了啊 |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
isfull
commented
Apr 21, 2013
mark |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
wjcody
commented
Apr 21, 2013
mark 很不错 |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
Yi-Lyu
commented
Apr 21, 2013
.... 这和在前端页面上加个CSS有个啥区别。。。 |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
ghost
commented
Apr 21, 2013
第12行最好修改为:
|
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
BlackTea1988
commented
Apr 21, 2013
mark |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
livmx
commented
Apr 21, 2013
mark |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
deanzhang
commented
Apr 22, 2013
very good, thanks! |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
bugyangs
commented
Apr 22, 2013
不错 |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
sgsheg
commented
Apr 22, 2013
mark |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
hanzhenhui
commented
Apr 22, 2013
good! |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
yangg
commented
Apr 22, 2013
为什么要写个html,再加个img?一个html,img自动会应用的吧?至少我这里是的 |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
alvinchan
commented
Apr 22, 2013
马克一下,多谢 |
This comment has been minimized.
Show comment
Hide comment
This comment has been minimized.
Show comment Hide comment
xuyazhong
commented
Apr 27, 2013
有意思。 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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/