到達 WebKit 中的 CSS 篩選器效果

背景

濾鏡效果已經存在一段時間，但設計用於 SVG。在將圖片合併並轉譯至文件前，這些效果可讓您輕鬆套用色彩強度、扭曲或模糊等效果。

其實早在 2009 年，Mozilla 就曾表示 SVG 不夠好！他們最後決定進一步使用篩選器，並允許在 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 夜間版

在 Webkit 夜間版本中，篩選器可套用至硬體加速內容 ( 例如 img { -webkit-transform: translateZ(0); })。在 Chrome 中，加速內容的篩選器仍在開發中 (請使用 --enable-accelerated-filters 標記)。這包括預設會加速的 <video>。