当前位置:首页 > PHP教程 > php应用 > 列表

CSS 滤镜效果:模糊、灰度、亮度等

发布:smiling 来源: PHP粉丝网  添加日期:2018-09-18 09:12:01 浏览: 评论:0 

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

filter: <filter-function> [<filter-function>]* | none

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

亮度:

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

img {     filter: brightness(300%); }

对比度

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

img { filter: contrast(0%); }

灰度

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

img { filter: grayscale(100%); }

饱和度

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

img { filter: saturate(0%); }

棕褐色化

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

img { filter: sepia(100%); }

色调对调

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

img { filter: hue-rotate(90deg);

反色

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

img { filter: invert(100%); }

模糊

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

img { filter: blur(1px); }

不透明度

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

img { filter: opacity(75%); }

阴影

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

img { filter: drop-shadow(5px 5px 10px #666); }

Url()

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

  1.   <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> 
  2. <filter id="greenish"> 
  3.   <feComponentTransfer> 
  4.     <feFuncR type="linear" slope="2" intercept="-0.5"/> 
  5.     <feFuncG type="linear" slope="2" intercept="-0."/> 
  6.     <feFuncB type="linear" slope="2" intercept="-0.25"/> 
  7.   </feComponentTransfer> 
  8. </filter> 
  9. <filter id="bluish"> 
  10.   <feComponentTransfer> 
  11.     <feFuncR type="linear" slope="2" intercept="-0.5"/> 
  12.     <feFuncG type="linear" slope="2" intercept="-0.1"/> 
  13.     <feFuncB type="linear" slope="2" intercept="0"/> 
  14.   </feComponentTransfer> 
  15. </filter> 
  16.   </svg> 
  17.  
  18. <style type="text/css"> 
  19.   img { 
  20. filter: url('#greenish'); 
  21.   } 
  22.   </style> 

组合和动画滤镜

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

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

  1. img { 
  2. animation: haunted 3s infinite; 
  3.   } 
  4.  
  5.   @keyframes haunted { 
  6. 0% { 
  7.   filter: brightness(20%); 
  8. 48% { 
  9.   filter: brightness(20%); 
  10. 50% { 
  11.   filter: sepia(1) contrast(2) brightness(200%); 
  12. .... 
  13. 96% { 
  14.   filter: brightness(400%); 
  15.   } 

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

补充:

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

iframe

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

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

结语

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

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

Tags: 滤镜 灰度 亮度

分享到: