顺风背景不透明度

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)