Skip to content

Instantly share code, notes, and snippets.

@hydra35
Last active May 14, 2021 03:51
Show Gist options
  • Star 56 You must be signed in to star a gist
  • Fork 31 You must be signed in to fork a gist
  • Save hydra35/5426536 to your computer and use it in GitHub Desktop.
Save hydra35/5426536 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link

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

@yuanhaisheng
Copy link

Good, Thank you!

@hydra35
Copy link
Author

hydra35 commented Apr 21, 2013

@itchina110 thanks! update the original to support firefox

@hi500
Copy link

hi500 commented Apr 21, 2013

mark

@itchina110
Copy link

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

@feythin
Copy link

feythin commented Apr 21, 2013

mark

@iamsujun
Copy link

一种玩法,记载下

@Jackpakistan
Copy link

这样子方便多了啊

@isfull
Copy link

isfull commented Apr 21, 2013

mark

@wjcody
Copy link

wjcody commented Apr 21, 2013

mark 很不错

@Yi-Lyu
Copy link

Yi-Lyu commented Apr 21, 2013

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

Copy link

ghost commented Apr 21, 2013

第12行最好修改为:

}</style></head>';

@BlackTea1988
Copy link

mark

@livmx
Copy link

livmx commented Apr 21, 2013

mark

@deanzhang
Copy link

very good, thanks!

@bugyangs
Copy link

不错

@sgsheg
Copy link

sgsheg commented Apr 22, 2013

mark

@hanzhenhui
Copy link

good!

@yangg
Copy link

yangg commented Apr 22, 2013

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

@alvinchan
Copy link

马克一下,多谢

@xuyazhong
Copy link

有意思。

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