CSS Podcast - 023:篩選器
假設您需要建立一個稍微不透明的元素 浮現的玻璃特效。 文字必須是即時文字,而非圖片。 該怎麼做呢?
CSS 篩選器和 backdrop-filter
的組合
就能即時套用效果並模糊處理所需的效果
模糊和不透明度是許多可用的篩選器
讓我們快速瞭解一下它們各自的功能和使用方式
filter
屬性
您可以套用下列一或多個篩選器,做為
filter
。
如果套用的篩選器不正確
為 filter
定義的其餘篩選器將無法運作。
blur
這會套用高斯模糊效果,且唯一可以傳遞的引數為 radius
。
這是
影片的模糊程度。
必須是長度單位,例如 10px
。系統不接受百分比。
.my-element {
filter: blur(0.2em);
}
brightness
如要提高或降低元素的亮度, 使用亮度功能 亮度值會以百分比表示,未變更的圖片則以 100% 表示。 值為 0% 時,圖片會變成全黑色。 因此,介於 0% 和 100% 之間的值會降低圖片的亮度。 使用高於 100% 的數值調高亮度。
.my-element {
filter: brightness(80%);
}
contrast
將值分別設為 0% 和 100% 可降低或提高對比度。
.my-element {
filter: contrast(160%);
}
grayscale
將 1
設為 grayscale()
的值,即可套用完全灰階效果。
或 0
表示元素已經飽和。
您也可以使用百分比或小數值,只套用局部灰階效果。
如果未傳遞引數,元素就會完全變成灰階。
如果傳遞的值大於 100%,上限會是 100%。
.my-element {
filter: grayscale(80%);
}
invert
和 grayscale
一樣,
您可以將 1
或 0
傳遞至 invert()
函式,即可開啟或關閉該函式。
開啟時,元素的顏色會完全反轉。
您也可以使用百分比或小數值,只套用局部反轉色彩。
如果您沒有將任何引數傳遞至 invert()
函式,
就會完全反轉元素
.my-element {
filter: invert(1);
}
opacity
opacity()
篩選器的運作方式就像 opacity
屬性一樣
傳遞數字或百分比,藉此增加或減少不透明度。
如果未傳遞引數,則元素會完全顯示。
.my-element {
filter: opacity(0.3);
}
saturate
飽和度篩選器與 brightness
篩選器非常類似,且接受相同的引數:
數字或百分比
而不是增加或調低亮度效果
saturate
會增加或減少色彩飽和度。
.my-element {
filter: saturate(155%);
}
sepia
這個濾鏡可與 grayscale()
一樣,加入深褐色調效果。
深褐色調是一種相片沖印技術,可將黑色色調轉換成棕色來暖化。
您可以將數字或百分比做為 sepia()
的引數傳遞
增加或減少效果
如果未傳遞任何引數,就會產生完整的深褐色效果 (相當於 sepia(100%)
)。
.my-element {
filter: sepia(70%);
}
hue-rotate
您已瞭解 hsl
中的色調如何參照色彩轉輪的旋轉機制
色彩課程和這個篩選器的用法。
如果傳遞角度 (例如角度或轉彎)
該元件就會改變所有元素色彩的色調
變更所參照之色彩轉輪的部分。如果您未傳遞引數,就不會執行任何動作。
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
就像在設計工具中,您可以套用曲線擁擠的陰影
例如 Photoshop,以及
drop-shadow
。
這個陰影會套用至 Alpha 遮罩,因此在裁剪圖片中加入陰影時非常實用。
drop-shadow
篩選器採用陰影參數,其中包含以空格分隔的偏移值、偏移值、偏移度、模糊效果和顏色值。
這與 box-shadow
幾乎相同
但系統不支援 inset
關鍵字和分散值。
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
如要進一步瞭解不同類型的陰影,請參閱陰影模組。
url
url
篩選器可讓您從連結的 SVG 元素或檔案套用 SVG 濾鏡。
你可以
進一步瞭解可擴充向量圖形篩選器
背景幕濾鏡
背景篩選器
屬性接受與 filter
相同的所有篩選函式值。
backdrop-filter
和filter
之間的差異
是 backdrop-filter
屬性只會將濾鏡套用至背景
其中 filter
屬性會套用至整個元素。
本課程一開始的範例就是最佳範例 因為我們不想讓文字模糊不清 而且在理想的情況下,您就不需要加入額外的 HTML 元素。 若僅針對背景套用濾鏡,即可達到這樣的效果。
隨堂測驗
測試您對篩選器的瞭解程度
以下何者為 CSS 篩選器函式?
multiply()
invert()
brightness()
grayscale()
flip()
blur()
CSS 可以使用 SVG 濾鏡嗎?