CSS滤镜已在WebKit中开始实现

by

滤镜对你来说可能不是什么新鲜事儿，即便是在网页开发当中，你或许也已经在SVG当中使用很多次了。不过这次不同，滤镜将开始正式进入CSS——WebKit已开始支持CSS滤镜。

本文当中的所有代码均来自http://updates.html5rocks.com/2011/12/CSS-Filter-Effects-Landing-in-WebKit，如果您对其中的任何技术细节存在疑问，请以原文为准。

CSS滤镜的作用远比SVG滤镜大。一旦这一标准被所有浏览器支持，诸如灰度、模糊、色相变换等滤镜效果将在所有HTML标签上体现，即便是video也不例外。如今，每到一些丧悼纪念日时，很多网站都会将所有元素调整为黑白，而如果使用CSS滤镜，这几乎只是一句代码的事情了。

/* gray all images by 50% and blur by 10px */
img {
  -webkit-filter: grayscale(0.5) blur(10px);
}

在Webkit nightly当中，所有硬件加速的标签（img等）都可以直接使用上面的代码；而在Chrome canary（Chrome 18.0.976.0）当中，如果是硬件加速的标签，这一功能需要使用--enable-accelerated-filters进行开启（video默认为硬件加速）。

Posted in: CSS3, HTML5, 浏览器 ⋅ Tagged: , , , , , ,

About liuyanghejerry

富有激情的前端工程师，专注GUI开发。

4 Thoughts on “CSS滤镜已在WebKit中开始实现”

  1. 王斌 on 2011 年 12 月 31 日 at 11:46 said:

    想问下，为什么说CSS滤镜的作用远比SVG滤镜大？是因为css被用到的地方更广泛还是css滤镜本身的功能相对svg大？好像火狐可以在svg中定义滤镜，然后被html元素引用了

    • liuyanghejerry on 2012 年 1 月 2 日 at 21:57 said:

      火狐很早就支持滤镜了，不过因为独一家支持，网站上用的好像还真不多。这次webkit支持了这一特性，就意味着常规浏览器当中又有至少2款支持了滤镜，可行性一下子就提高了。

  2. simon on 2013 年 3 月 7 日 at 12:01 said:

    请问webkit滤镜在移动端的支持情况如何?

    • liuyanghejerry on 2013 年 4 月 8 日 at 17:03 said:

      这个特性在桌面上才刚刚出现，移动平台对它实现不容乐观，BB10、iOS6在有-webkit-前缀的情况下可用，Android不支持。

      参考：http://caniuse.com/#feat=css-filters

Post Navigation