篩選器

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) 時一樣。此陰影會套用於 Alpha 遮罩，在凹口圖片中加入陰影。drop-shadow 篩選器會採用陰影參數，其中包含以空格分隔的 x 值、偏移值、模糊處理值和顏色值。這個類型與 box-shadow 幾乎相同，但不支援 inset 關鍵字和分佈值。

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

進一步瞭解「shadows」模組中不同類型的陰影。

url

瀏覽器支援

  • 5
  • 12
  • 3
  • 6

資料來源

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

背景幕濾鏡

瀏覽器支援

  • 76
  • 17
  • 103
  • 9

資料來源

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

本課程開頭處有個絕佳範例，這些例子就是不希望文字模糊處理，而且理想上是不需要加入額外的 HTML 元素。能夠只將濾鏡套用至背景即可實現這一點。

隨堂測驗

測驗您對篩選器的相關知識

下列何者是 CSS 篩選函式？

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

CSS 可以使用 SVG 濾鏡嗎？

是
url() 篩選器函式可執行這項作業
否
請再試一次！