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>

有条件地应用

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

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

了解更多关于使用变体的信息，请查阅 变体文档。

使用自定义值

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

了解更多关于使用变体的信息，请查阅 变体文档。