WebKit 中的 CSS 滤镜效果登陆页面

背景

滤镜效果已经存在一段时间了,但其设计为适用于 SVG。在图片合成并渲染到文档之前,它们能够非常强大,可以在图片上应用色彩强度、变形或模糊等效果。

回想吧,在 2009 年,Mozilla 曾表示 SVG 是不够的!他们最终更进一步,在 Firefox 3.5 中允许过滤器使用 HTML 内容。欢迎在正在播放的<video>上观看 Paul Irish 的经典 SVG 滤镜演示。同样,虽然该功能仅适用于 Firefox,但仍然是膝盖的。

今天

Flash 一直到 2011 年底,而 Adobe(以及其他公司)一直致力于将这一令人惊叹的技术引入 CSS。具体而言,我指的是 WebKit 已开始实现的 CSS 滤镜效果 1.0

直接在 CSS 中启用过滤器意味着几乎所有 DOM 元素都可以使用过滤器!图片,<video><canvas>,由您指定。

CSS 滤镜效果演示。

未来

该规范还定义了 CSS 着色器,最终会将 OpenGL 着色器技术引入 CSS。这真是太令人兴奋了!不过,每次打开系统的 GPU 时,都会考虑安全因素。因此,WebKit 目前只实现了 CSS 过滤器函数。

支持

Chrome 18.0.976.0(目前为 Canary 版),Webkit 每晚

在 Webkit 夜间版本中,过滤器可应用于硬件加速内容(例如 img { -webkit-transform: translateZ(0); })。在 Chrome 中,针对加速内容的过滤器仍在开发中(使用 --enable-accelerated-filters 标记)。其中包括 <video>,默认情况下会加速。