CSS3 Filter

今天下午设计稿拿到手之后，有一个如下的需求：

WechatIMG94.jpeg

产品的要求：每张图片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%);
}

浏览器支持情况：

浏览器支持情况.jpeg

当然，CSS3 Filter不可能仅仅只有上面这一个效果，下面我将为您展示其他的filter效果。

CSS3 Filter效果1.jpeg CSS3 Filter效果2.jpeg CSS3 Filter效果3.jpeg

其默认值是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制作阴影效果的小例子：

先看一下原图的样子：

timg.jpeg

下面我们再来看一下加上阴影之后的效果：

WechatIMG100.jpg

我们先来看一下代码，再讲原理：
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 滤镜技巧与细节中去了解，以上部分内容是摘抄自这两篇文章。