瞭解 CSS 篩選器效果

簡介

篩選器是一項強大的工具，可讓網頁作者創造有趣的視覺效果。本文將說明篩選器效果的歷史、運作方式和使用方式。並舉例說明 CSS 定義的所有預先定義篩選器，並提供一些範例。此外，我們也會說明在電腦和行動裝置上使用時需考量的成效注意事項，因為瞭解篩選器對速度的影響，是提升使用者體驗的關鍵。最後，我們來談談目前瀏覽器導入狀態的方式。

濾鏡特效過去、現在和未來

源自可縮放向量圖形 (SVG) 規格的濾鏡效果。因此可將多種像素式圖片效果套用至向量繪圖。隨著瀏覽器廠商在瀏覽器中新增 SVG 功能，篩選器變得日益實用。Mozilla 的 Robert O’Callahan 想過，透過 CSS 應用和「一般」HTML 內容使用 SVG 濾鏡，是個不錯的想法。Robert 設計了初期版本，示範濾鏡和 CSS 樣式組合的強大之處。W3C 中的 CSS 和 SVG 工作群組決定採用透過 CSS 樣式設定，同時針對 HTML 和 SVG 使用濾鏡的功能，因此 CSS 的「filter」屬性誕生於此。目前是 CSS 和 SVG 團隊的共同工作團隊，正投入大量心力打造健全的濾鏡。您可以參閱這篇文章，瞭解這些內容目前的規格。

「篩選器」CSS 屬性的新生活

在 CSS 樣式中看到「篩選器」時，Deja Vu 有時會警告網頁程式開發人員。這是因為舊版 Internet Explorer 會透過 CSS 公開「篩選器」資源，以執行部分平台專屬功能。不過，此屬性已淘汰，並改用現在屬於 CSS3 的標準「filter」屬性。因此，如果某些舊網頁已隨機顯示「篩選器」，您就不需要感到困惑。全新的「篩選器」屬性可讓您執行所有動作，而新版 IE 導入的方式與所有新版瀏覽器一模一樣。

篩選器的運作方式

那麼篩選器的作用是什麼？最簡單的方法就是將篩選器視為後置處理步驟，讓所有網頁內容都經過整理和繪製後，能產生神奇效果。

瀏覽器載入網頁時，必須套用樣式、執行版面配置並轉譯網頁，有需要注意的內容。完成所有步驟後，篩選器會在頁面複製到畫面之前啟動。他們做法是先用點陣圖圖片擷取轉譯網頁快照，再為圖像中的像素套用神奇效果，然後再將結果繪製在原始網頁圖片上方。你可以將這種裝置想像成在相機鏡頭正面的濾鏡。你透過鏡頭看到的內容，是受到濾鏡效果改變的外界世界。

當然，這意味著繪製含有篩選器的網頁時可花費許多時間，但正確使用對網站速度影響不大。

此外，就像在相機鏡頭的前方堆疊多個濾鏡一樣，你可以逐一套用任意數量的濾鏡，藉此呈現各種特效。

使用 SVG 和 CSS 定義的篩選器

由於篩選器原本來自 SVG，因此定義及使用方式的方式各有不同。SVG 本身就具有 <filter> 元素，該元素會使用 XML 語法納入各種濾鏡效果的定義。CSS 定義的篩選器組合運用了相同的圖形模型，但比較簡單的定義，更易於在樣式表中使用。

大部分的 CSS 篩選器都能以 SVG 濾鏡表示，如有需要，CSS 也可讓你參照 SVG 中指定的篩選條件。CSS 篩選器設計人員已投注大量心力，讓網頁作者更容易套用篩選器，因此本文僅介紹 CSS 直接提供的篩選器，因此目前會忽略 SVG 定義。

如何套用 CSS 篩選器

只要使用已套用至網頁上任何可見元素的「篩選器」屬性，即可使用 CSS 篩選器。舉個簡單的範例，您可以這樣寫

div { { % mixin filter: grayscale(100%); % } }

讓頁面上所有 <div> 元素的內容變成灰色。非常適合讓你的網頁看起來像 1940 年代的電視圖片。

大部分的篩選器會採用某種形式的參數，控制要執行的篩選作業。舉例來說，如果想將內容樣式調整為原始顏色和灰階版本的一半，請按照下列步驟操作：

div { { % mixin filter: grayscale(50%); % } }

如果想同時套用多個不同的篩選器，方法很簡單，只要在 CSS 中依序排列這些篩選條件即可：

div { { % mixin filter: grayscale(100%) sepia(100%); % } }

這個範例會先將所有原始色彩變成灰階，然後套用深褐色效果，最後看起來會像這樣：

因為您可以逐一套用濾鏡，靈活地套用各種效果，至於要嘗試創造出絕佳成果，完全取決於發揮想像力。

使用 CSS 時可用的濾鏡特效

因此，原始的可擴充向量圖形篩選器機制雖然強大，但使用起來可能很麻煩。因此，CSS 推出了一系列標準濾鏡效果，使用起來更加輕鬆。

以下讓我們逐一介紹它們的功用。

灰階(amount)

這會將輸入圖片中的色彩轉換為灰色。套用的「金額」會決定套用灰色轉換的範圍。如果目標為 100%，則所有顏色都會呈現灰色，表示 0% 的顏色維持不變。如果想高於百分比，可以在這裡使用浮點數。也就是說，0 與 0% 的功用相同，但 1.0 的功用與 100% 相同。

深褐色(金額)

如此一來，就能像舊相片一樣，達到深褐色調所傳遞的色彩。套用「金額」的方式與「灰階」篩選器的運作方式相同 - 100% 會讓所有顏色完全以深褐色呈現，較小的值則能以較小的比例套用效果。

飽和度(amount)

這樣即可為色彩套用色彩飽和度效果，讓顏色更加鮮明。這是一項酷炫效果，可以讓相片看起來像海報或卡通。此外，您還可以使用大於 100% 的值，藉此強調飽和度。這個效果肯定能讓相片看起來很有趣！

色調旋轉(角度)

這個特效只是微小的色彩效果，可用於搜尋有趣的結果。這種模型的作用是變更顏色，讓輸入圖片看起來完全不同。如果您能想像從紅色到紫色的色譜，圍繞色環，這種效果會將轉盤上的原始色彩成為輸入來源，然後透過「angle」參數在轉輪上產生色彩，並做為輸出色彩值旋轉。因此圖片中的所有色彩都會以滾輪相同的「角度」轉移。當然，這只是一個簡化的流程，但希望能盡量貼近您的需求。

反轉(金額)

這個效果會翻轉色彩，也就是說，套用金額的「金額」等於 100% 的效果，看起來就像舊電影的舊鏡頭下形成負向相片！和先前一樣，使用小於 100% 的值，則會逐步套用反轉效果。

不透明度(金額)

如果想讓篩選內容呈現半公開狀態，請自行設定。「amount」值會定義輸出內容的不透明程度。因此，如果值為 100%，則完全不透明，因此輸出結果會和輸入內容完全相同。如果數值低於 100%，輸出圖片的不透明度就會越低 (較透明)，結果則越少，越低。當然，如果它與網頁上的其他內容重疊，下方資訊就會開始顯示。「金額」為 0% 表示將完全消失。但請注意，您仍然會在完全透明的物件上取得滑鼠點擊等事件，因此如果想建立不顯示任何內容的可點擊區域，這個方法就很實用。

做法與已知的「opacity」屬性相同。一般來說，CSS 的「不透明度」屬性不會使用硬體加速，但部分瀏覽器在使用硬體加速功能導入篩選器時，會加快篩選器的不透明度，進一步提升成效。

亮度(金額)

這就和電視的亮度控制選項一樣。可根據「amount」參數的值，調整完全黑色和原始顏色之間的顏色。如將這個值設為 0%，您不會看到黑色文字，但由於數值會提高到 100%，您會發現原始圖片的亮度越來越多，直到達到 100% 為止，直到圖片與輸入圖片一樣。當然你也可以繼續保持拍攝，因此設定 200% 這類格式後，圖像的亮度將是原始的兩倍，非常適合調整光線不足的相片。

對比(金額)

更多電視設定控制選項！這項操作會調整輸入圖片中最暗和最亮部分之間的差異。如果將 0% 替換成黑色，就像「亮度」一樣，那就不有趣。不過，如果您將暗度變化提高到 100%，直到達到 100% 為止，並且就是原始圖片。你也可以獲得比 100% 以上的效果，進一步提升淺色和深色之間的差異。

模糊(半徑)

如果想讓內容呈現柔和邊緣，可以加上模糊效果。這看起來像經典的花生線在玻璃紙片上，曾是熱門的電影製作技巧。這種模式會混合所有色彩並散播效果，就像是眼睛失焦時一樣。「半徑」參數會影響螢幕上彼此混合的像素數量，因此設定較大的值會產生較多的模糊效果。當然，圖片可能維持不變。

drop-shadow(shadow)

如果想製作的內容看起來像外在陽光下，還記得「陰影」這樣的效果，而且還有陰影。這項工具會拍攝圖片的快照，將其設為單一色彩並進行模糊處理，然後稍微偏移結果，看起來就像原始內容的陰影。傳入的「shadow」參數比單一值還算複雜。這個值是一系列以空格分隔的值，有些值也是選用項目！「陰影」值可控制陰影放置的位置、套用的模糊程度，以及陰影色彩等。如需「陰影」值功能的完整詳細說明，請參閱 CSS3 背景規格以詳細定義「方塊陰影」。以下幾個範例應該有助您掌握各種可能性。

這是另一種篩選作業，類似於透過「box-shadow」屬性提供的 CSS 功能。使用篩選器方法表示該函式可能會透過某些瀏覽器加速硬體加速，如上述的「不透明度」操作所述。

參照 SVG 篩選器的網址

篩選器源自 SVG，因此對於使用 SVG 濾鏡的內容應該是理所當然的。只要使用目前的「篩選器」資源提案，就能輕鬆辦到。SVG 中的所有篩選器都以「id」屬性定義，可用來參照濾鏡效果。因此，如要使用 CSS 提供的任何 SVG 篩選器，你只要以「網址」語法參照該篩選器即可。

舉例來說，篩選器的 SVG 標記可能如下所示：

<filter id="foo">...</filter>

您就可以輕鬆完成以下工作：

div { { % mixin filter: url(#foo); % } }

大功告成！文件中的所有 <div> 都會按照 SVG 篩選器定義設定樣式。

自訂 (即將推出)

近期即將推出的是自訂篩選器。這些感應器運用了圖形 GPU 的強大威力，使用特殊陰影語言，在想像範圍內創造出絕佳效果。這部分的「篩選器」規格目前仍在討論及變動，但只要該技術開始引進您附近的瀏覽器，我們就一定會撰寫更多相關資訊。

效能注意事項

每一位網頁開發人員都關心自家網頁或應用程式的效能。CSS 篩選器是視覺效果強大的視覺效果工具，但同時可能會影響網站成效。

瞭解這類素材資源的用途和對成效的影響，特別是當您希望網站在行動裝置上能順利運作時，如果支援 CSS 篩選器，更是如此。

首先，每個篩選器的成效不盡相同！事實上，大多數篩選器都能在所有平台上快速執行，但對成效的影響微乎其微。然而，進行所有模糊處理的濾鏡，速度往往會比其他濾鏡慢。當然還有「模糊」和「投射陰影」。這不代表請勿使用這些功能，但瞭解它們的運作方式可能會有幫助。

使用 blur 時，系統會混合輸出像素周圍的像素色彩，來產生模糊結果。因此，如果您的 radius 參數是 2，則篩選器需要在每個輸出像素周圍觀察 2 個像素，才能產生混合顏色。每個輸出像素會發生這種情形，因此當您增加 radius 時，系統會隨著大量計算而增加。由於 blur 會往每個方向查看，因此將「半徑」加倍意味著您需要將像素數加倍，也就是將 radius 加倍時，像素要變慢 4 倍。drop-shadow 篩選器的效果包含 blur，因此當您變更 shadow 參數的 radius 和 spread 部分時，行為會如同 blur。

所有平台都不會因為 blur 而遺失，因為在某些平台上，使用 GPU 來加速處理是可行的，但這不一定適用於所有瀏覽器。有疑慮時，最好先多方嘗試，找出最能提升效果的「半徑」範圍，然後盡可能減少幅度，同時維持可接受的視覺效果。如此一來，使用者會更滿意，尤其是用手機瀏覽您的網站時。

如果您使用的篩選器以 url 為基礎的篩選器會參照 SVG 濾鏡，這類濾鏡可能會包含任何濾鏡效果。請注意，這類濾鏡可能產生速度過慢，因此建議您確認一下濾鏡效果，然後在行動裝置上進行實驗，確保成效符合規範。

適用於新型瀏覽器

目前，許多 CSS filter 效果都能在以 WebKit 為基礎的瀏覽器和 Mozilla 中使用。它們應該很快就會在 Opera 和 IE10 中推出。由於規格仍處於開發階段，部分瀏覽器供應商已使用供應商前置字元導入相關內容。因此，在 WebKit 中，您需要使用 -webkit-filter，在 Mozilla 中則必須使用 -moz-filter，並留意其他瀏覽器實作的外觀。

並非所有瀏覽器都能立即支援所有濾鏡效果，因此里程數會有所不同。目前，Mozilla 瀏覽器僅支援 filter: url() 函式，但不包括廠商前置字串，因為該實作方式已早於其他效果功能。

以下摘要說明各種瀏覽器可用的 CSS 篩選器效果，並依據概略的成效指標在軟體中導入這些效果。請注意，部分新型瀏覽器開始在硬體 (GPU 加速) 中導入這些功能。當這些功能在建構時支援 GPU 時，處理效能將大幅提升，以適應較慢的效果。如往常一樣，使用不同瀏覽器測試是評估成效最好的方式。

濾鏡效果	瀏覽器支援	效能
灰階圖片	Chrome	非常快
深褐色	Chrome	非常快
飽和	Chrome	非常快
色調旋轉	Chrome	快速
反轉	Chrome	非常快
opacity	Chrome	相當慢
亮度	Chrome	快速
對比度	Chrome	快速
模糊	Chrome	除非加速
drop-shadow	Chrome	相當慢
url()	Chrome、Mozilla	視情況而定，速度快到慢

其他實用資源

超讚的互動式抽象繪畫應用程式，可讓您實驗並分享圖片。請務必查看 Eric Bidelman 的絕佳互動式篩選器頁面 絕佳濾鏡相關教學課程頁面 提供範例 官方 W3C 濾鏡效果 1.0 草稿規格 http://dev.w3.org/fxtf/filters/ 範例 使用濾鏡建立的 UI