前端必修技能：高手进阶核心知识分享 - CSS 滤镜详解

所谓滤镜，最初源于摄影。摄影师通过在镜头前增加各种颜色的透明玻璃片来创作不同风格的摄影作品。这些玻璃镜就是滤镜。摄影师的滤镜附件有很多种，比如UV镜，增光，减光，渐变，变色，星芒等等。随着数码相机和流行和数字艺术的发展，使得更多的作者趋于通过后期处理来完成摄影前的滤镜效果。PS类的图形处理软件就提供了丰富的滤镜效果，使得摄影师的作品更加绚丽和充满艺术性。

而CSS滤镜，是css提供给网页开发者的一种非常强大的视觉效果工具，直接通过CSS对HTML元素（如图片、文本、背景等）应用各种图像处理效果，如模糊、色调调整、透明度控制等。。有了CSS滤镜，我们可以无需使用任何其他图片处理软件（比如PS）在页面前端轻松实现许多超级酷的效果。

本文就通过实际对比，深入讲解CSS滤镜的常用函数，通过丰富的实例代码和详尽注释，帮助新手读者迅速的掌握这一增强网页视觉吸引力的技术。

一、CSS滤镜的语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

具体用法如下：

.element { filter: function1() function2() ...; }

二、常用滤镜函数实例：

注意:  滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。虽然我们全部是以图片做滤镜对比，但很有必要提醒大家，滤镜不是仅仅作用在img标签的，它可以作用更多的标签上，比如 div，h1 等等，需要你自己去想象和尝试。

1：模糊 blur(px)

给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0；

特别注意：这个参数可设置css长度值，但不接受百分比值。

本例：

.blur { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); }

2：亮度 brightness(%)

给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。

本例：

.brightness { -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */ filter: brightness(200%); }

3：对比度 contrast(%)

调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

本例：

.contrast { -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */ filter: contrast(200%); }

4:阴影 drop-shadow

drop-shadow: (h-shadow, v-shadow, blur, spread, color)  给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受 shadow (在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。

本例：

.drop-shadow{ -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */ filter: drop-shadow(8px 8px 10px red); }

5:灰度 grayscale(%)

grayscale(%): 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0;

本例：

.grayscale{ -webkit-filter: grayscale(90%); /* Chrome, Safari, Opera */ filter: grayscale(90%); }

6:色相旋转 hue-rotate(deg): 

hue-rotate(deg): 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

本例：

.hue-rotate{ -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */ filter: hue-rotate(90deg); }

7：反转输入 invert(%)

invert(%): 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

本例：

.invert{ -webkit-filter: invert(100%); /* Chrome, Safari, Opera */ filter: invert(100%); }

8：透明度 opacity(%)

opacity(%): 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

本例：

.opacity{ -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */ filter: opacity(30%); }

9：饱和度 saturate(%)

saturate(%): 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。

本例：

.saturate{ -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */ filter: saturate(800%); }

10：深褐色 sepia(%)

sepia(%): 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0;

本例：

.sepia{ -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */ filter: sepia(100%); }

三、组合滤镜

滤镜支持混合，通过不同滤镜的组合，可以实现更多具有不同表现力的效果。

本例：

.complex1{ -webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */ filter: contrast(200%) brightness(150%); }

本例：

.complex2{ -webkit-filter: blur(5px) grayscale(90%); /* Chrome, Safari, Opera */ filter: blur(5px) grayscale(90%); }

四、基于URL()的SVG滤镜

url(): URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。

我们可以通过创建svg滤镜，实现更加丰富灵活的滤镜效果。下面就举一个简单的例子实现svg滤镜。

首先，我们要先创建一段svg滤镜。

<svg xmlns="http://www.w3.org/2000/svg"> 
<filter id="blur"> 
<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"/> 
<feGaussianBlur stdDeviation="2"/> 
</filter> 
</svg>

需要注意的是，当我们需要同时调用两个滤镜时，将两个滤镜写在一个标签里，可以同时实现。接下来，我们在css里创建这样一个类：

.blur { filter: url('#blur'); /* svg 中filter的id，注意不要忘记写‘#’ */ }

调用方法：

<img src="child.jpg" alt="child" class="blur" >

让我们看看这个svg滤镜的效果：

<svg>
    <defs>
        <filter id="multiply" x="0" y="0" width="300" height="200">
            <feImage width="300" height="200" xlink:href="child.jpg"  result="img2"/>
            <feImage width="300" height="200" xlink:href="star.jpg"  result="img1"/>
            <feBlend mode="multiply" in="img1" in2="img2" />
        </filter>
    </defs>
</svg>

.containerimg { float: left; height: 100%; width: 100%; height: 200px; display: block; filter: url(#multiply); }

鉴于目前网站上传不了压缩包，暂时没法提供本源代码下载，敬请谅解！功能解锁后，必来补上！

如果您觉得本文对您有所帮助，欢迎您点赞，收藏！有任何问题和疑问，建议和纠错，欢迎评论！谢谢！