濾鏡
用於將飽和度濾鏡應用於元素的工具類。
類別 | 樣式 |
---|---|
saturate-<number> | filter: saturate(<number>%); |
saturate-(<custom-property>) | filter: saturate(var(<custom-property>)); |
saturate-[<value>] | filter: saturate(<value>); |
使用 saturate-50
和 saturate-100
等工具類來控制元素的飽和度
saturate-50
saturate-100
saturate-150
saturate-200
<img class="saturate-50 ..." src="/img/mountains.jpg" /><img class="saturate-100 ..." src="/img/mountains.jpg" /><img class="saturate-150 ..." src="/img/mountains.jpg" /><img class="saturate-200 ..." src="/img/mountains.jpg" />
使用 saturate(飽和度)-[<value>]
語法 來設定飽和度基於完全自定義的值
<img class="saturate-[.25] ..." src="/img/mountains.jpg" />
對於 CSS 變數,您也可以使用 saturate(飽和度)-(<custom-property>)
語法
<img class="saturate-(--my-saturation) ..." src="/img/mountains.jpg" />
這只是 saturate(飽和度)-[var(<custom-property>)]
的簡寫,它會自動為您添加 var()
函數。
前綴一個 filter: saturate()
工具類 使用像 md:
這樣的斷點變體,僅在medium(中等) 螢幕尺寸及以上應用該工具類
<img class="saturate-50 md:saturate-150 ..." src="/img/mountains.jpg" />
請參閱變體文件以了解更多關於使用變體的信息。