Skip to content

Instantly share code, notes, and snippets.

Embed
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
@itchina110

This comment has been minimized.

Copy link

@itchina110 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/

@itchina110

This comment has been minimized.

Copy link

@itchina110 itchina110 commented Apr 21, 2013

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

@yuanhaisheng

This comment has been minimized.

Copy link

@yuanhaisheng yuanhaisheng commented Apr 21, 2013

Good, Thank you!

@hydra35

This comment has been minimized.

Copy link
Owner Author

@hydra35 hydra35 commented Apr 21, 2013

@itchina110 thanks! update the original to support firefox

@hi500

This comment has been minimized.

Copy link

@hi500 hi500 commented Apr 21, 2013

mark

@itchina110

This comment has been minimized.

Copy link

@itchina110 itchina110 commented Apr 21, 2013

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

@feythin

This comment has been minimized.

Copy link

@feythin feythin commented Apr 21, 2013

mark

@iamsujun

This comment has been minimized.

Copy link

@iamsujun iamsujun commented Apr 21, 2013

一种玩法,记载下

@Jackpakistan

This comment has been minimized.

Copy link

@Jackpakistan Jackpakistan commented Apr 21, 2013

这样子方便多了啊

@isfull

This comment has been minimized.

Copy link

@isfull isfull commented Apr 21, 2013

mark

@wjcody

This comment has been minimized.

Copy link

@wjcody wjcody commented Apr 21, 2013

mark 很不错

@Yi-Lyu

This comment has been minimized.

Copy link

@Yi-Lyu Yi-Lyu commented Apr 21, 2013

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

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Apr 21, 2013

第12行最好修改为:

}</style></head>';
@BlackTea1988

This comment has been minimized.

Copy link

@BlackTea1988 BlackTea1988 commented Apr 21, 2013

mark

@livmx

This comment has been minimized.

Copy link

@livmx livmx commented Apr 21, 2013

mark

@deanzhang

This comment has been minimized.

Copy link

@deanzhang deanzhang commented Apr 22, 2013

very good, thanks!

@bugyangs

This comment has been minimized.

Copy link

@bugyangs bugyangs commented Apr 22, 2013

不错

@sgsheg

This comment has been minimized.

Copy link

@sgsheg sgsheg commented Apr 22, 2013

mark

@hanzhenhui

This comment has been minimized.

Copy link

@hanzhenhui hanzhenhui commented Apr 22, 2013

good!

@yangg

This comment has been minimized.

Copy link

@yangg yangg commented Apr 22, 2013

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

@alvinchan

This comment has been minimized.

Copy link

@alvinchan alvinchan commented Apr 22, 2013

马克一下,多谢

@xuyazhong

This comment has been minimized.

Copy link

@xuyazhong xuyazhong commented Apr 27, 2013

有意思。

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