Skip to content

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

The content you are editing has changed. Reload the page and try again.

第12行最好修改为:

}</style></head>';

Attach images by dragging & dropping or selecting them. Uploading your files… Unfortunately, we don’t support that file type. Try again with a PNG, GIF, JPG. Yowza, that’s a big file. Try again with an image file smaller than 10MB. This file is empty. Try again with a file that’s not empty. This browser doesn’t support file attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can’t process that file. Try again.

Nothing to preview

@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.