透明度

示例

基本示例

使用 opacity-<数字> 实用程序（如 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>

有条件地应用

前缀一个 带有变体（如 disabled:*）的 opacity 实用程序，以便仅在该状态下应用该实用程序。

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

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

使用自定义值

使用 透明度-[<值>] 语法 来设置透明度基于完全自定义的值

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

对于 CSS 变量，您也可以使用 透明度-(<自定义属性>) 语法

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

这只是 透明度-[var(<自定义属性>)] 的简写形式，它会自动为您添加 var() 函数。

响应式设计

前缀一个 带有断点变体（如 md:）的 opacity 实用程序，以便仅在 中等屏幕尺寸及以上 应用该实用程序。

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

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