网站变灰代码兼容火狐浏览器

wwh • 2013-04-24 08:53 • 网站维护 • 阅读 11311

分享一段网站变灰代码，悼念雅安地震遇难同胞。之前找了一些代码在火狐下无效，于是百度谷歌一起上，终于被我找到了支持火狐、谷歌等浏览器的把网页变黑白代码：

/* 网站变灰代码 */
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-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”); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}

将这段代码加入style.css 最顶部，到前台刷新一下，网页变灰色了吧，包括网站的广告、图片等整个网页变黑白了，网上流传的网页变灰代码大多都支持IE核心的浏览器，对火狐、谷歌等支持不好，我找到的这段网页变灰代码完美兼容火狐、谷歌等浏览器。

如果您的网站没有使用CSS控制，可以在可以在网页/模板的HTML代码<head>和</head> 之间插入下面这段代码：

<!– 头部插入网站变灰代码 –>
<style>
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-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”); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}
</style>