顺风背景不透明度

Question

我很好奇 CSS 背后的顺风背景不透明度。我只能在纯 CSS 中找到 'opacity'，但这会影响所有内容，而不仅仅是背景。有人可以解释一下吗？

Answer 1

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)

Tailwind bg opacity