篩選器

CSS Podcast - 023：篩選器

假設您需要建立一個稍微不透明的元素 浮現的玻璃特效。 文字必須是即時文字，而非圖片。 該怎麼做呢？

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

filter 屬性

瀏覽器支援

  • Chrome：53。
  • Edge：12.
  • Firefox：35。
  • Safari：9.1。

資料來源

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

blur

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

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

brightness

瀏覽器支援

  • Chrome：18.
  • Edge：12.
  • Firefox：35。
  • Safari：6.

資料來源

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

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

contrast

瀏覽器支援

  • Chrome：18.
  • Edge：12.
  • Firefox：35。
  • Safari：6.

資料來源

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

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

grayscale

瀏覽器支援

  • Chrome：18.
  • Edge：12.
  • Firefox：35。
  • Safari：6.

資料來源

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

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

invert

瀏覽器支援

  • Chrome：18.
  • Edge：12.
  • Firefox：35。
  • Safari：6.

資料來源

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

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

opacity

瀏覽器支援

  • Chrome：18.
  • Edge：12.
  • Firefox：35。
  • Safari：6.

資料來源

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

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

saturate

瀏覽器支援

  • Chrome：18.
  • Edge：12.
  • Firefox：35。
  • Safari：6.

資料來源

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

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

sepia

瀏覽器支援

  • Chrome：18.
  • Edge：12.
  • Firefox：35。
  • Safari：6.

資料來源

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

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

hue-rotate

瀏覽器支援

  • Chrome：18.
  • Edge：12.
  • Firefox：35。
  • Safari：6.

資料來源

您已瞭解 hsl 中的色調如何參照色彩轉輪的旋轉機制 色彩課程和這個篩選器的用法。 如果傳遞角度 (例如角度或轉彎) 該元件就會改變所有元素色彩的色調 變更所參照之色彩轉輪的部分。如果您未傳遞引數，就不會執行任何動作。

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

drop-shadow

瀏覽器支援

  • Chrome：18.
  • Edge：12.
  • Firefox：35。
  • Safari：6.

資料來源

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

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

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

url

瀏覽器支援

  • Chrome：5.
  • Edge：12.
  • Firefox：3.
  • Safari：6.

資料來源

url 篩選器可讓您從連結的 SVG 元素或檔案套用 SVG 濾鏡。 你可以 進一步瞭解可擴充向量圖形篩選器

背景幕濾鏡

瀏覽器支援

  • Chrome：76.
  • Edge：79，
  • Firefox：103。
  • Safari：18。

資料來源

背景篩選器 屬性接受與 filter 相同的所有篩選函式值。 backdrop-filter和filter之間的差異 是 backdrop-filter 屬性只會將濾鏡套用至背景 其中 filter 屬性會套用至整個元素。

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

隨堂測驗

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

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

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

CSS 可以使用 SVG 濾鏡嗎？

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