Skip to content

@hydra35 /nginx.conf
Last active

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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

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

@itchina110

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

@yuanhaisheng

Good, Thank you!

@hydra35
Owner

@itchina110 thanks! update the original to support firefox

@hi500

mark

@itchina110

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

@feythin

mark

@iamsujun

一种玩法,记载下

@Jackpakistan

这样子方便多了啊

@isfull

mark

@wjcody

mark 很不错

@pangee

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

@ghost
Unknown commented

第12行最好修改为:

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

mark

@deanzhang

very good, thanks!

@bugyangs

不错

@sgsheg

mark

@hanzhenhui

good!

@yangg

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

@alvinchan

马克一下,多谢

@xuyazhong

有意思。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.