opacity

範例（Examples）

基本範例（Basic example）

使用 opacity-25 和 opacity-100 等 opacity-<number> 通用類別來設定元素的透明度：

<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>

條件式套用（Applying conditionally）

在 opacity 通用類別前面加上像 disabled:* 這樣的變體，讓該通用類別只在該狀態下套用：

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

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

使用自訂值（Using a custom value）

使用 opacity-[<value>] 語法，根據完全自訂的值來設定 opacity：

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

對於 CSS 變數，你也可以使用 opacity-(<custom-property>) 語法：

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

這只是 opacity-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。

響應式設計（Responsive design）

在 opacity 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

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

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