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

背景

滤镜效果已经存在一段时间了，但旨在在 SVG 中发挥作用。它们非常强大，可以在图片合成并渲染到文档之前，对图片应用色彩强度、扭曲或模糊等效果。

早在 2009 年，Mozilla 就表示 SVG 还不够用！最终，他们更进一步，在 Firefox 3.5 中允许在 HTML 内容中使用过滤器。请查看 Paul Irish 关于在播放的 <video> 上使用 SVG 滤镜的永恒演示。再次提醒，此方法仅适用于 Firefox，但仍然非常实用。

今天

时间来到 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 每夜 build

在 Webkit 夜间版中，过滤器可以应用于硬件加速内容（例如 img { -webkit-transform: translateZ(0); }）。在 Chrome 中，针对加速内容的过滤器仍在开发中（使用 --enable-accelerated-filters 标志）。这包括默认处于加速状态的 <video>。