篩選器

CSS Podcast - 023: Filters

假設您需要建立的元素具有略為不透明的磨砂玻璃效果，並位於圖片上方。文字必須是動態文字，而非圖片。該如何進行？

結合 CSS 濾鏡和 backdrop-filter，我們就能在需要時套用效果和模糊處理。模糊和不透明度是可用的眾多濾鏡中的兩種，讓我們快速瀏覽一下這兩種濾鏡的功能和使用方式。

注意： 請小心在圖片上方放置文字，以免使用者瀏覽器不支援濾鏡效果，導致文字無法正常顯示。

filter 屬性

Browser Support

• 53
• 12
• 35
• 9.1

Source

您可以將下列一或多個篩選器套用為 filter 的值。如果您套用篩選器的方式有誤，filter 的其他定義篩選器將無法運作。

blur

這會套用高斯模糊處理效果，您唯一可傳遞的引數是 radius，也就是套用模糊處理效果的程度。此值必須是長度單位，例如 10px。系統不接受百分比。

.my-element {
    filter: blur(0.2em);
}

brightness

Browser Support

• 18
• 12
• 35
• 6

Source

如要調高或調低元素的亮度，請使用亮度函式。亮度值以百分比表示，未經變更的圖片會以 100% 的值表示。值為 0% 會使圖片完全變黑，因此 0% 到 100% 之間的值會使圖片變暗。使用大於 100% 的值可提高亮度。

.my-element {
    filter: brightness(80%);
}

注意： 您也可以在 brightness 等篩選器中使用小數值，而非百分比值。如要使用小數設定 80% 的亮度，請輸入 0.8。

contrast

Browser Support

• 18
• 12
• 35
• 6

Source

將值設為介於 0% 和 100% 之間，即可分別減少或增加對比度。

.my-element {
    filter: contrast(160%);
}

grayscale

Browser Support

• 18
• 12
• 35
• 6

Source

您可以使用 1 做為 grayscale() 的值，或使用 0 套用完全灰階效果，以便取得完全飽和的元素。您也可以使用百分比或小數值，只套用部分灰階效果。如果您未傳入任何引數，元素將完全轉換成灰階。如果您傳遞的值大於 100%，系統會將其上限設為 100%。

.my-element {
    filter: grayscale(80%);
}

invert

Browser Support

• 18
• 12
• 35
• 6

Source

就像 grayscale 一樣，您可以將 1 或 0 傳遞至 invert() 函式，以便開啟或關閉該函式。開啟後，元素的顏色會完全反轉。您也可以使用百分比或小數值，只套用部分反轉顏色。如果您未將任何引數傳遞至 invert() 函式，元素將完全反轉。

.my-element {
    filter: invert(1);
}

opacity

Browser Support

• 18
• 12
• 35
• 6

Source

opacity() 濾鏡的運作方式與 opacity 屬性相同，您可以傳遞數字或百分比來增加或減少不透明度。如果您未傳遞任何引數，元素就會完全顯示。

.my-element {
    filter: opacity(0.3);
}

saturate

Browser Support

• 18
• 12
• 35
• 6

Source

飽和度篩選器與 brightness 篩選器非常相似，且接受相同的引數：數字或百分比。saturate 會增加或減少色彩飽和度，而非增加或減少亮度效果。

.my-element {
    filter: saturate(155%);
}

sepia

Browser Support

• 18
• 12
• 35
• 6

Source

您可以使用這個濾鏡加入棕褐色調效果，其運作方式與 grayscale() 相同。深褐色調是一種攝影沖印技術，可將黑色調轉換為棕色調，讓畫面看起來更溫暖。您可以傳遞數字或百分比做為 sepia() 的引數，藉此增加或減少效果。如未傳遞任何引數，系統會加入完整的棕褐色效果 (等同於 sepia(100%))。

.my-element {
    filter: sepia(70%);
}

hue-rotate

Browser Support

• 18
• 12
• 35
• 6

Source

您已在顏色課程中瞭解 hsl 中的色調如何參照色盤的旋轉方式，而這個濾鏡的運作方式也類似。如果您傳遞角度 (例如度數或轉數)，系統會轉換所有元素顏色的色調，變更參照的色盤部分。如果您未傳遞任何引數，系統就不會執行任何操作。

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Browser Support

• 18
• 12
• 35
• 6

Source

您可以套用曲線貼合陰影，就像在 Photoshop 中使用 drop-shadow 等設計工具一樣。這個陰影會套用至 Alpha 遮罩，因此非常適合用於為裁剪圖片新增陰影。drop-shadow 濾鏡會採用陰影參數，其中包含以空格分隔的 offset-x、offset-y、模糊和顏色值。它幾乎與 box-shadow 相同，但不支援 inset 關鍵字和間距值。

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

如要進一步瞭解不同類型的陰影，請參閱「陰影」單元。

url

Browser Support

• 5
• 12
• 3
• 6

Source

url 濾鏡可讓您從已連結的 SVG 元素或檔案套用 SVG 濾鏡。如要進一步瞭解 SVG 濾鏡，請參閱這篇文章

背景濾鏡

Browser Support

• 76
• 79
• 103
• 18

Source

backdrop-filter 屬性可接受與 filter 相同的所有篩選器函式值。backdrop-filter 和 filter 的差異在於 backdrop-filter 屬性只會將篩選器套用至背景，而 filter 屬性會將篩選器套用至整個元素。

本課程一開始的範例就是最佳示例，因為您不希望文字模糊，而且最好不要再新增額外的 HTML 元素。只要能將濾鏡套用至背景，就能實現這項功能。

進行隨堂測驗

測驗您對篩選器的瞭解

下列哪些是 CSS 濾鏡函式？

grayscale()

🎉

invert()

🎉

flip()

請再試一次！

multiply()

請再試一次！

blur()

🎉

brightness()

🎉

CSS 可以使用 SVG 濾鏡嗎？

是

url() 篩選器函式可啟用此功能

否

請再試一次！