opacity (不透明度)

範例

基本範例

使用 opacity-<number> 工具類別，例如 opacity-25 和 opacity-100 來設定元素的不透明度

<button class="bg-indigo-500 opacity-100 ..."></button><button class="bg-indigo-500 opacity-75 ..."></button><button class="bg-indigo-500 opacity-50 ..."></button><button class="bg-indigo-500 opacity-25 ..."></button>

有條件地套用

前綴an opacity 工具類別與變體，例如 disabled:*，僅在該狀態下套用該工具類別

<input class="opacity-100 disabled:opacity-75 ..." type="text" />

在變體文件中了解更多關於使用變體的資訊。

使用自訂值

使用 opacity (不透明度)-[<value>] 語法 設定opacity (不透明度)基於完全自訂的值

<button class="opacity-[.67] ...">  <!-- ... --></button>

對於 CSS 變數，您也可以使用 opacity (不透明度)-(<custom-property>) 語法

<button class="opacity-(--my-opacity) ...">  <!-- ... --></button>

這只是 opacity (不透明度)-[var(<custom-property>)] 的簡寫，它會自動為您新增 var() 函數。

響應式設計

前綴an opacity 工具類別 與中斷點變體 (例如 md:) 一起使用，僅在medium (中) 螢幕尺寸及以上套用該工具類別

<button class="opacity-50 md:opacity-100 ...">  <!-- ... --></button>

在變體文件中了解更多關於使用變體的資訊。