CSS3 滤镜学习

- - html篇
  - 样式篇
  - grayscale
  - sepia
  - saturate
  - hue-rotate
  - invert
  - opactiy
  - brightness
  - contrast
  - blur
  - drop-shadow
  - 综合小效果
- 总结

A CSS filter is a coding technique used to hide or show CSS markup depending on the browser, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards. CSS filters are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering.

大致的意思就是CSS的滤镜的存在就是为了解决不同浏览器能够显示一致的网页效果的技术。在最大程度上保证了兼容性和一致性。关于CSS滤镜的详细的介绍，大家可以参照维基百科https://en.wikipedia.org/wiki/CSS_filter

单纯的讲解关于滤镜的知识会显得有些无趣，那么我们不妨从代码着手，来个top-down的学习方式，来体验一把CSS3滤镜的神奇魅力。

html篇

首先来贴出模板的HTML代码，为了下面的演示方便。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>前端</title>
     <link rel="stylesheet" type="text/css" href="attachment.css">
</head>
<body>
<br>
<img id="img" src="http://avatar.csdn.net/0/8/F/1_marksinoberg.jpg"/>
<img id="img_temp" class="imgfilter" src="http://avatar.csdn.net/0/8/F/1_marksinoberg.jpg"/>
</body>
</html>

明眼的你也看到了博主这里引用了一个外部的css样式文件，这样可以使得代码的整洁性得到些许的提高，后续维护起来也是比较的方便，建议大家以后也尽量这么干，争取做到样式文件和html代码的分离。

样式篇

attachment.css文件其实内容很少，只涉及到了博主今天要分享的关于滤镜效果的很简短的代码。大致的“框架”如下。

.imgfilter {
-webkit-filter:/*针对于chrome，Safari厂商*/
filter:/*标准的css滤镜写法*/
}

由于目前而言，CSS3还没有被真正的标准化，所以不同厂商之间对其的支持还有点不太一致，但是对于将来而言都将不是问题。博主这里为了更加的普适，就是用标准的filter的方式了。

grayscale

灰度化。见名知意。图片变灰咯。默认值为1，实现的效果就是给图片加上一层灰色状的效果。

从0-1的过程为灰度逐渐增强的过程。

filter: grayscale(0.5);

实现的效果如下：

sepia

老照片效果。默认的参数为1,也就是会显示老照片的效果。这点可以应用到图片处理的应用上面。

filter: sepia(0.7);

实现的效果：

saturate

饱和度。给人的感觉就是图片的“浓度”（这里断章取义的使用了这个名词）问题，我们的直观感受就是图片中颜色的深度以及彩度的变化。

filter: saturate(0.3);

实现的效果：

hue-rotate

色相旋转。默认为0deg，效果即为原图效果。需要注意的是一下情况。

0deg == 360deg
180deg == -180deg

filter: hue-rotate(180deg);

实现的效果：

invert

反相。想必大家都见过或者听闻过早期的照片的底片吧。类似地，反相的效果就是翻转原图的像素，实现一个色度相反的效果。

我个人感觉：

默认为10%0，效果为反相；
0-0.5之间的相当于加上了一层灰影，较适合做蒙皮特效，比如hover的时候给照片加上灰影；
0.5的时候为全灰，无法正常显示图片，可以作为刮刮乐的填色效果
0.5-1为反相显现阶段，逐渐加深的效果。

filter: invert(0.75);

实现的效果：

opactiy

一想到透明度，大家首先可能想到的就是玻璃吧。是的，附加了透明度效果的图片可以被赋予很多奇幻的特效。

默认为1，不透明效果。

0-1为不透明度渐现的过程，0 的时候图片全透明，不可见。

filter: opacity(0.56);

实现的效果：

brightness

亮度。一个很神奇的效果。你是否想到了太阳东升西落，大地由白入黑的一天呢？是的应用了亮度的话，我们其实是可以做出这样的效果的。

默认为100%，效果不变。0的时候图片全黑。

0-1的过程为亮度逐渐增强的过程。

filter: brightness(0);

实现的效果：

contrast

对比度。人与人之间可以相互的对比。图片同样是如此。对比度给人的明显的感觉就是图片色彩的艳丽程度，值越大给人的感觉越是浮夸。但是这并不代表其用处不大。在一些类似于油画作品的展示上，还是很有效果滴。

filter: contrast(0.7);

实现的效果：

blur

模糊度。说实话，一提到模糊我们就会想到毛玻璃不是。确实是这样的一个效果。前提是运用得当的话。

默认为0px,效果为原图。0-infinite的过程为模糊程度渐强的过程，注意是以px为单位进行的变换哦。

filter: blur(10px);

实现的效果：

drop-shadow

shadow给人的印象就是加个阴影什么的了吧。事实上还真的就是这样。类似于box-shadow效果，为图片添加阴影效果，可以根据颜色的拓展实现图片的立体效果。

filter: drop-shadow(1px 1px 2px #6e6e6e);

实现的效果：

综合小效果

最后给大家来个综合一点的小滤镜合集吧。

filter: drop-shadow(2px 2px 3px #6e6e6e) blur(1px) opacity(0.3) brightness(1.2);

再加上一个图片hover的样式效果。

.img:hover {
    transform: scale(2.8);
    animation-duration: 2s;
    border-radius: 28px;
    box-shadow: 2px 2px 2px #6e6e6e;
}

最终的效果。

总结

回顾一下，本文主要是介绍了相关于CSS3的滤镜特效的实例，附带了一些效果图。

单个的效果起到的作用不大，整合起来写一个自己的滤镜样式小工具，真正的运用到实际的项目开发中，才是目的。