效果
opacity
用于控制元素透明度的工具。
类 | 样式 |
---|---|
opacity-<number> | opacity: <number>%; |
opacity-(<custom-property>) | opacity: var(<custom-property>); |
opacity-[<value>] | opacity: <value>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 opacity-<number>
工具(如 opacity-25
和 opacity-100
)设置元素的透明度:
¥Use opacity-<number>
utilities like opacity-25
and opacity-100
to set the opacity of an element:
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>
有条件地应用(Applying conditionally)
¥Applying conditionally
在 opacity
工具前面加上一个变体,例如 disabled:*
,以便仅在该状态下应用该工具:
<input class="opacity-100 disabled:opacity-75 ..." type="text" />
请参阅 变体文档 详细了解如何使用变体。
使用自定义值(Using a custom value)
¥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)
¥Responsive design
在 opacity
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<button class="opacity-50 md:opacity-100 ..."> <!-- ... --></button>
请参阅 变体文档 详细了解如何使用变体。