to gray, for Ya'An, Si Chuan earthquake

nginx.conf

# 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

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/

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/

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

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

Good, Thank you!

Good, Thank you!

@itchina110 thanks! update the original to support firefox

@itchina110 thanks! update the original to support firefox

mark

mark

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

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

mark

mark

一种玩法，记载下

一种玩法，记载下

这样子方便多了啊

这样子方便多了啊

mark

mark

mark 很不错

mark 很不错

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

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

第12行最好修改为：

}</style></head>';

第12行最好修改为：

}</style></head>';

mark

mark

mark

mark

very good, thanks!

very good, thanks!

不错

不错

mark

mark

good!

good!

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

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

马克一下，多谢

马克一下，多谢

有意思。

有意思。