css 顺风bg混浊

jbose2ul 于 2023-07-01 发布在其他

关注(0)|答案(3)|浏览(112)

我对Tailwinds bg opacity背后的CSS很好奇。我只能在纯CSS中找到'opacity'，但它会影响所有内容，而不仅仅是背景。有人能解释一下吗？

3条答案

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)

参见顺风文档中的Here。第二个数字表示不透明度。

<button class="bg-sky-500/100 ..."></button>
<button class="bg-sky-500/75 ..."></button>
<button class="bg-sky-500/50 ..."></button>

对于那些不想附加到tailwind.config.css的用户：

<div className="bg-[rgb(255,0,0)]/50">

一个常见的陷阱是在逗号之间或括号内放空格。