opacity

用于控制元素不透明度的工具类。

快速参考

类	属性
opacity-<number>	opacity: <number>%;
opacity-(<custom-property>)	opacity: var(<custom-property>);
opacity-[<value>]	opacity: <value>;

示例

基础示例

使用 opacity-25 和 opacity-100 等 opacity-<number> 工具类设置元素的不透明度：

opacity-100

opacity-75

opacity-50

opacity-25

<!-- [!code classes:opacity-100,opacity-75,opacity-50,opacity-25] -->
<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>

按条件应用

在 opacity 工具类前加上 disabled:* 等变体，即可只在该状态下应用该工具类：

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

在变体文档中了解更多关于使用变体的信息。

使用自定义值

使用 opacity-[<value>] 等工具类，根据完全自定义的值设置不透明度：

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

对于 CSS 变量，也可以使用 opacity-(<custom-property>) 语法：

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

这只是 opacity-[var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

在 opacity 工具类前加上 md: 等断点变体，即可只在中等屏幕尺寸及以上应用该工具类：

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

在变体文档中了解更多关于使用变体的信息。