濾鏡
filter: brightness()
用於將亮度濾鏡應用於元素的實用程式。
| 類別 | 樣式 |
|---|---|
brightness-<number> | filter: brightness(<number>%); |
brightness-(<custom-property>) | filter: brightness(var(<custom-property>)); |
brightness-[<value>] | filter: brightness(<value>); |
範例
基本範例
使用像是 brightness-50 和 brightness-100 的實用程式來控制元素的亮度
brightness-50
brightness-100
brightness-125
brightness-200
<img class="brightness-50 ..." src="/img/mountains.jpg" /><img class="brightness-100 ..." src="/img/mountains.jpg" /><img class="brightness-125 ..." src="/img/mountains.jpg" /><img class="brightness-200 ..." src="/img/mountains.jpg" />使用自訂值
使用 亮度-[<value>] 語法 來設定亮度基於完全自訂的值
<img class="brightness-[1.75] ..." src="/img/mountains.jpg" />對於 CSS 變數，您也可以使用 亮度-(<custom-property>) 語法
<img class="brightness-(--my-brightness) ..." src="/img/mountains.jpg" />這只是 亮度-[var(<custom-property>)] 的簡寫，會自動為您新增 var() 函式。
響應式設計
前綴一個 filter: brightness() 實用程式 使用像 md: 這樣的斷點變體，僅在中等 螢幕尺寸及以上套用實用程式
<img class="brightness-110 md:brightness-150 ..." src="/img/mountains.jpg" />在 變體文件中瞭解更多關於使用變體的資訊。
