今天下午设计稿拿到手之后，有一个如下的需求：
产品的要求：每张图片hover的时候变暗，选中的时候加上右下角的小钩。
当时脑海里想到的解决办法一是用css 滤镜来做，二是通过改变图片的透明度，然后加上一个深色的背景色。第一种的话担心兼容性不好，第二种的话代码略多一些。两种方法我都做了，第一种经测试在谷歌、Opera、Firefox、safari上都没有问题，IE上还没有测试，不过官方介绍是不支持的，第二种做法就不介绍了，说一下第一种的实现代码，非常的简单。
a:hover, a.active {
img {
-webkit-filter: brightness(0.4);
filter: brightness(0.4);
}
}
你没有看错，就是这么的简单。
具体的使用语法：
elm {
filter: none | <filter-function > [ <filter-function> ]*
}
举个简单的实例：修改所有图片的颜色为黑白 (100% 灰度):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
浏览器支持情况：
当然，CSS3 Filter不可能仅仅只有上面这一个效果，下面我将为您展示其他的filter效果。
其默认值是none，他不具备继承性，其中filter-function一个具有以下值可选：
grayscale灰度
sepia褐色
saturate饱和度
hue-rotate色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影
下面是实现上面这些效果的代码，我举出了一个小例子，相信聪明的你一看就会。
<ul class="demo">
<li>
<a href="#"><img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" /></a>
<span>normal(无filter效果)</span>
<pre>-webkit-filter:none;</pre>
</li>
<li>
<a href="#">
<img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />
<img class="grayscale" title="grayscale" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />
</a>
<span>grayscale（灰度）</span>
<pre>-webkit-filter:grayscale(1);</pre>
</li>
</ul>
li a:hover img { -webkit-filter:none; }
li a .grayscale { -webkit-filter:grayscale(1); }
li a .sepia { -webkit-filter:sepia(1); }
li a .saturate { -webkit-filter:saturate(0.5); }
li a .saturate2 { -webkit-filter:saturate(3); }
li a .hue-rotate { -webkit-filter:hue-rotate(90deg); }
li a .invert { -webkit-filter:invert(1); }
li a .opacity { -webkit-filter:opacity(.2); }
li a .brightness { -webkit-filter:brightness(.5); }
li a .contrast { -webkit-filter:contrast(2); }
li a .blur { -webkit-filter:blur(3px); }
li a .drop-shadow { -webkit-filter:drop-shadow(5px 5px 5px #ccc); }
li a .custom { -webkit-filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9); }
下面，我们再来看一个使用CSS3 Filter制作阴影效果的小例子：
先看一下原图的样子：
下面我们再来看一下加上阴影之后的效果：
我们先来看一下代码，再讲原理：
html：
<div class="container">
<div class="avatar"></div>
</div>
css:
.container {
width: 200px;
margin: 20px auto;
}
.avatar {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: url($img) no-repeat center center;
background-size: 100% 100%;
&::after {
content: "";
position: absolute;
top: 10%;
left: 0%;
width: 100%;
height: 100%;
background: inherit;
background-size: 100% 100%;
border-radius: 50%;
transform: scale(.95);
filter: blur(10px) brightness(80%) opacity(.8);
z-index: -1;
}
}
其简单的原理就是，利用伪元素，生成一个与原图一样大小的新图叠加在原图之下，然后利用滤镜模糊 filter: blur() 配合其他的亮度/对比度，透明度等滤镜，制作出一个虚幻的影子，伪装成原图的阴影效果。
嗯，最重要的就是这一句 filter: blur(10px) brightness(80%) opacity(.8); 。
更多详细的内容，您可以进到 CSS3 Filter的十种特效、CSS3 filter(滤镜) 属性、你所不知道的 CSS 滤镜技巧与细节中去了解，以上部分内容是摘抄自这两篇文章。
