【发布时间】：2021-12-19 16:28:59
【问题描述】：
我对 tailwinds bg opacity 背后的 CSS 感到好奇。我只能在纯 CSS 中找到“不透明度”，但这会影响一切，而不仅仅是背景。有人可以解释一下吗？
【问题讨论】：
-
请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。
标签： css background opacity tailwind-css tailwind-ui
【发布时间】：2021-12-19 16:28:59
【问题描述】：
Tailwinds background opacity 影响颜色参数中使用的变量。 Tailwind 使用rgba(red, green, blue, opacity)，其中最后一个参数是颜色不透明度。
例如.bg-black 看起来像这样：
.bg-black {
--tw-bg-opacity: 1;
background-color: rgba(0,0,0,var(--tw-bg-opacity));
}
bg-opacity-50 看起来像这样：
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
它重载--tw-bg-opacity 变量并导致：
background-color: rgba(0,0,0,0.5)
【讨论】：