Saber 酱的抱枕

测试文字测试文字测试文字

有时候网页上需要做一些黑白切换效果，比如分享按钮，原本是灰色的，鼠标放上去的时候再变成彩色的。

传统办法是准备两张图，一张灰色的一张彩色的，用切换图片或者背景定位（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滤镜）

可爱的小菇凉（pid=63965945）

CSS3的灰度滤镜grayscale