03/8
2018
测试文字测试文字测试文字
有时候网页上需要做一些黑白切换效果，比如分享按钮，原本是灰色的，鼠标放上去的时候再变成彩色的。
传统办法是准备两张图，一张灰色的一张彩色的，用切换图片或者背景定位（background-position）来实现。
在CSS3里就很方便了，只需要准备一张彩色图片，在需要用灰度的时候应用grayscale滤镜即可（并且grayscale滤镜还可以用于文字等其他元素）。
上面效果的代码：
<style>
.css3_gray{filter: grayscale(100%);transition: all .3s ease;}
.css3_gray:hover{filter:none;}
</style>
<p style="color:#ef457e;" class="css3_gray">测试文字测试文字测试文字</p>
<img src="/f/fenxiang1.jpg" alt="" class="css3_gray">
兼容性：
各大浏览器均可，除了IE全系列（没错，IE11也不支持css3滤镜）
Read More →
CSS3的灰度滤镜grayscale
09/18
2016
body {
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);
filter:gray;
-webkit-filter:grayscale(1);
}
之前我也发过一篇文章，实验了用css滤镜将网页变成灰色，但是那个不太完善。
今天在百度百科看到某位明星的词条变成黑白了，便扒下来代码保存一下。
但是这份代码也有个没能解决的问题：
无法把body上设置的背景图片变成灰色。
使用CSS滤镜将网页变成黑白（灰色）
08/14
2015
代码如下：
html{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
chrome下效果完美，火狐中body的背景图片没有变灰，IE11中完全无效。对于IE应该可以兼容到IE9。
我花了半个多小时，测试了各种方法，除了各种css外，还找过用js创建canvas的代码，或是使用某jq插件，最后也没成功实现全浏览器通吃。css的方法最简单，不过兼容性不怎么让人满意。
chrome是使用了-webkit-filter: grayscale(100%)这一项，火狐中生效的是filter:grayscale(100%)。
IE10和IE11在图像滤镜方面还是比较坑爹的,不能执行filter滤镜，而且连svg滤镜也不支持。
使用chrome的话可以玩玩下面这个小玩意：
可以重复点哦。
代码如下：
<button id="setGray">设置网页的灰度</button>
<script>
$("#setGray").click(
function setGray () {
var grayCss="-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%); filter: grayscale(100%);";
var num=prompt("请输入您希望的灰度（正整数）","");
if (num!=100) {
grayCss=grayCss.replace(/100/g, num);
};
$("html").attr("style",grayCss);
}
)
</script>
以上真是蛋疼之作，不知道会有地方用到不。
