css - 顺风背景不透明度

Question

我很好奇tailwinds bg opacity 背后的CSS。我只能在纯 CSS 中找到“不透明度”，但这会影响一切，而不仅仅是背景。有人可以解释一下吗？

Answer 1

Tailwinds 背景不透明度会影响颜色参数中使用的变量。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)