篩選器

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

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 一樣, 您可以將 10 傳遞至 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-filterfilter之間的差異 是 backdrop-filter 屬性只會將濾鏡套用至背景 其中 filter 屬性會套用至整個元素。

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

隨堂測驗

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

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

multiply()
invert()
brightness()
grayscale()
flip()
blur()

CSS 可以使用 SVG 濾鏡嗎?