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:）的，以仅在中等 屏幕尺寸及以上应用该实用工具

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

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