原文:
CSS Filter Effects:Blur, Grayscale, Brightness and More in CSS!

CSS Filter Effects
图为本文中 CSS 滤镜效果实例

滤镜原本是 SVG 规范中的一部分。然而,当滤镜的用途变得更广泛时,W3C 也开始给 CSS 增加了一些常用的滤镜效果。CSS 滤镜非常强大又好用,你可以用它来模糊,变亮或饱和度以调整图像。这些滤镜可以单独使用也可以和其它的滤镜组合使用,滤镜的 CSS 语法是这样的:

现在开始,我将对这些滤镜做一下简要的介绍。

亮度

该滤镜控制图像的亮度。它可以接受大于或等于零的值作为它的参数。值为 0% 时将变成黑色。值为 100% 时则是原始图像。你可以指定大于 100% 的值以得到更明亮的图像。比如设为 300% 的值将使图像变成 3 倍亮:

orignal
原图

brightnessEffects

对比度

该滤镜控制图像的对比度。同上,它也可以接受大于或等于零的值。该滤镜控制 CSS 里图像的深色和浅色部分之间的差异。因此,值为 0% 时的结果是得到一个灰色图像。对比度值为 100% 则是原始图像,超过此值之后将进一步提高图像的对比度:

contrastEffects

灰度

从名称上可以明显看出,该滤镜可以使你的图像变灰(黑白化)。该滤镜把所有图像的颜色转换为灰阶值。值为 0% 时对我们的图像没有影响,值为 100% 时会变成他们完全变成黑白,该值不允许为负。

grayscaleEffects

饱和度

该滤镜控制图像的饱和度。值为 0% 时将彻底从图像中删除掉所有颜色,而当值超过 100% 时将使图像饱和度增加。值为 100% 时则是原始图像,该值不允许为负。

saturateEffects

棕褐色化

这个滤镜会像一些老照片风格那样给图像加上深褐色色调。加入深褐色的量取决于百分比的值。值为 0% 时则是原始图像,并当值为 100% 时,图像将完全褐色。

sepiaEffects

色调对调

这个滤镜会把图像的所有颜色的色调对调。在该颜色对调的程度取决于指定的参数的值。当值为 0 度时,图像保持不变。虽然该滤镜没有最大值,但是,超过 360 deg 以上的值的效果会循环。也就是说,90 deg 和 450 deg 这两个值将具有相同的效果。

hue-rotateEffects

反色

这个滤镜会把图像的所有颜色反色。反色的量取决于参数的值。值为 0% 时不会对原始图像有任何影响,当值为 100% 时将完全反色。

invertEffects

模糊

该滤镜适用于高斯模糊图像。它把每个像素的颜色涂抹在一起,并散布到邻近的边缘外围。该滤镜设置的半径参数会确定屏幕上多少的像素会连成一片,越大的值将越模糊。这个滤镜可以接受除了百分比值外的任何长度值。

blurEffects

不透明度

该滤镜会将使你的图像半透明化。图像将在值为 0% 的时候完全透明,当值为 100% 则保持原样。该滤镜是类似于通常的 opacity 属性。这两者之间的区别只是在性能上略有差异,该滤镜在某些支持硬件加速的浏览器上会有更好的性能。

opacityEffects

阴影

顾名思义,这个滤镜给图像增加了阴影效果。它基本上是一种对输入图像的 alpha 遮罩的模糊,偏移量是你指定的颜色。此属性需要 x 轴和 y 轴偏移值,以及阴影的颜色值。你也可以设置一个模糊半径值,这会决定阴影是尖锐还是模糊。

drop-shadowEffects

Url()

虽然上述这些滤镜非常有用,但它们都是通用的,你的项目上可能需要更多自定义化效果。如果上述的滤镜没有满足你的需求,你可以创建自己的 SVG 滤镜并通过其 id 使用 url() 来引用这个滤镜。

UrlEffects

组合和动画滤镜

你也把可以多个滤镜组合在一起来创造各种效果。多数情况下,滤镜的顺序并没有多大关系,但是有的滤镜会根据在它们在你的 CSS 顺序会被其他一些滤镜将覆盖。例如,使用一个灰度滤镜后再使用深褐色滤镜最后只会出现一个棕色图像,如果顺序反过来的话会得到的一个灰度化的图像。

滤镜也可变成动画。通过正确的设置动画,你可以创建一些非常有趣的动画效果。以此为例:

在上面的代码中,具有不同值的多个滤镜会在动画的过程中生效。

CodePen 上的 Demo:
http://codepen.io/SitePoint/pen/KrXybm

补充

虽然滤镜会在一个元素的盒模型外描绘,但对该元素的盒子模型的几何结构没有影响。要记住滤镜会影响目标元素的一切,包括:背景,边框和文字修饰。你也可以在视频和内联框架中也使用滤镜。下面的演示说明了这个概念。更多的例子可在 Bennett Feely’s 的网站查看。

iframe

所有这些滤镜都非常伟大且性能很好,除了模糊滤镜之外,如果你的浏览器不支持硬件加速的话可能会有些慢。url() 滤镜的性能会根据你使用哪些 SVG 滤镜而决定。

filter 属性被所有主流浏览器支持。Chrome 和 Opera 需要这个属性的前缀版本一起使用。滤镜不支持 IE,不过 Edge 可以部分支持,也就是除了 url() 之外都支持。

结语

本贴给开发者探索了许多 CSS 滤镜功能。它们有很好的浏览器支持性,易于使用且比 canvas 的方案有更好的性能。此外,正如我在上面提到的,你也可以在视频以及与其他元素中使用。

如果你还有更绝妙的利用滤镜的方法,请给我留个言,或者提出你的疑问。

Tagged:

发表评论

电子邮件地址不会被公开。 必填项已用*标注