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

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

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

commented Apr 21, 2013

Good, Thank you!

@hydra35

This comment has been minimized.

Copy link
Owner Author

commented Apr 21, 2013

@itchina110 thanks! update the original to support firefox

@hi500

This comment has been minimized.

Copy link

commented Apr 21, 2013

mark

@itchina110

This comment has been minimized.

Copy link

commented Apr 21, 2013

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

@feythin

This comment has been minimized.

Copy link

commented Apr 21, 2013

mark

@iamsujun

This comment has been minimized.

Copy link

commented Apr 21, 2013

一种玩法,记载下

@Jackpakistan

This comment has been minimized.

Copy link

commented Apr 21, 2013

这样子方便多了啊

@isfull

This comment has been minimized.

Copy link

commented Apr 21, 2013

mark

@wjcody

This comment has been minimized.

Copy link

commented Apr 21, 2013

mark 很不错

@Yi-Lyu

This comment has been minimized.

Copy link

commented Apr 21, 2013

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

@ghost

This comment has been minimized.

Copy link

commented Apr 21, 2013

第12行最好修改为:

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

This comment has been minimized.

Copy link

commented Apr 21, 2013

mark

@livmx

This comment has been minimized.

Copy link

commented Apr 21, 2013

mark

@deanzhang

This comment has been minimized.

Copy link

commented Apr 22, 2013

very good, thanks!

@bugyangs

This comment has been minimized.

Copy link

commented Apr 22, 2013

不错

@sgsheg

This comment has been minimized.

Copy link

commented Apr 22, 2013

mark

@hanzhenhui

This comment has been minimized.

Copy link

commented Apr 22, 2013

good!

@yangg

This comment has been minimized.

Copy link

commented Apr 22, 2013

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

@alvinchan

This comment has been minimized.

Copy link

commented Apr 22, 2013

马克一下,多谢

@xuyazhong

This comment has been minimized.

Copy link

commented Apr 27, 2013

有意思。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.