篩選器

CSS Podcast - 023：篩選器

假設您要建構的元素，是略不透明、不透明的玻璃效果，並將其放置在圖片上方。文字必須是即時文字，而非圖片。 該怎麼做呢？

結合 CSS 篩選器和 backdrop-filter 後，我們就能即時套用效果並模糊處理所需的項目。模糊和不透明度是許多可用的篩選器，讓我們快速瞭解它們各自的功能和使用方式。

filter 屬性

瀏覽器支援

  • 53
  • 12
  • 35
  • 9.1

來源

您可以套用下列一或多個篩選器做為 filter 的值。如果您未正確套用某個篩選器，則針對 filter 定義的其餘篩選器將無法運作。

blur

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

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

brightness

瀏覽器支援

  • 18
  • 12
  • 35
  • 6

來源

如要提高或降低元素的亮度，請使用亮度功能。亮度值會以百分比表示，未變更的圖片則以 100% 表示。 值為 0% 時，圖片將全黑，因此介於 0% 和 100% 之間的值會降低圖片的亮度。使用高於 100% 的數值調高亮度。

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

contrast

瀏覽器支援

  • 18
  • 12
  • 35
  • 6

來源

將值分別設為 0% 和 100% 可降低或提高對比度。

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

grayscale

瀏覽器支援

  • 18
  • 12
  • 35
  • 6

來源

您可以使用 1 做為 grayscale() 的值，套用完全灰階效果，也可以使用 0 為完全飽和的元素。您也可以使用百分比或小數值，只套用局部灰階效果。如果未傳遞引數，元素就會完全變成灰階。如果傳遞的值大於 100%，上限會是 100%。

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

invert

瀏覽器支援

  • 18
  • 12
  • 35
  • 6

來源

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

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

opacity

瀏覽器支援

  • 18
  • 12
  • 35
  • 6

來源

opacity() 篩選器的運作方式與 opacity 屬性相同，您可以在此傳遞數字或百分比，藉此增加或減少不透明度。如果未傳遞引數，則元素會完全顯示。

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

saturate

瀏覽器支援

  • 18
  • 12
  • 35
  • 6

來源

飽和度篩選器與 brightness 篩選器非常相似，可接受相同的引數：數字或百分比。而不是增加或調低亮度效果，而是讓 saturate 增加或降低色彩飽和度。

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

sepia

瀏覽器支援

  • 18
  • 12
  • 35
  • 6

來源

這個濾鏡可與 grayscale() 一樣，加入深褐色調效果。深褐色調是一種相片沖印技術，可將黑色色調轉換成棕色來暖化。 您可以將數字或百分比做為 sepia() 的引數傳遞，藉此增加或減少效果。如果未傳遞任何引數，就會產生完整的深褐色效果 (相當於 sepia(100%))。

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

hue-rotate

瀏覽器支援

  • 18
  • 12
  • 35
  • 6

來源

您已瞭解 hsl 中的色調如何參照顏色課程中的色輪旋轉，且此篩選器的運作方式相似。如果傳遞角度 (例如度數或旋轉角度)，這類元素會改變所有元素色彩的色調，進而變更所參照顏色轉輪的部分。如果您未傳遞引數，就不會執行任何動作。

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

drop-shadow

瀏覽器支援

  • 18
  • 12
  • 35
  • 6

來源

您可以按照設計工具 (例如使用 drop-shadow 的 Photoshop) 套用曲線擁抱投射陰影。這個陰影會套用至 Alpha 遮罩，因此在裁剪圖片中加入陰影時非常實用。drop-shadow 篩選器採用陰影參數，其中包含以空格分隔的偏移值、偏移值、偏移度、模糊效果和顏色值。這與 box-shadow 幾乎相同，但不支援 inset 關鍵字和平均值。

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

如要進一步瞭解不同類型的陰影，請參閱陰影模組。

url

瀏覽器支援

  • 5
  • 12
  • 3
  • 6

來源

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

背景幕濾鏡

瀏覽器支援

  • 76
  • 79
  • 103
  • 18

來源

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

本課程一開始的範例就是最合適的範例，因為我們不希望文字模糊處理，而且在理想情況下會避免加入額外的 HTML 元素。若僅針對背景套用濾鏡，即可達到這樣的效果。

隨堂測驗

測試您對篩選器的瞭解程度

以下何者為 CSS 篩選器函式？

grayscale()
🎉
invert()
🎉
flip()
請再試一次！
multiply()
請再試一次！
blur()
🎉
brightness()
🎉

CSS 可以使用 SVG 濾鏡嗎？

可
url() 篩選器函式可讓您
否
請再試一次！