没有专门的CSS属性（如'background-opacity'）。
您可以模拟的效果与背景图像定义为一个线性梯度超过rgba值（即。具有透明度的颜色元组）。
通过指定点间隔取消渐变效果：

.bg-red {
    background: red;
}
.bg-transparent-50 {
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
}

<p>
    <div class="bg-red"                   style="width: 200px; height: 50px;">Opaque background</div>
    <div class="bg-red bg-transparent-50" style="width: 200px; height: 50px;">Semi-transparent background</div>
</p>

我只会将rgba与CSS属性结合使用。

div {
  padding: 0.25rem 0.5rem;
}

.background {
  --background-opacity: 100;
  background-color: rgba(var(--background-color), var(--background-opacity));
}

.background.black {
  --background-color: 0, 0, 0;
}

.opacity-100 {
  --background-opacity: 0;
}

.opacity-80 {
  --background-opacity: 0.2;
}

.opacity-60 {
  --background-opacity: 0.4;
}

.opacity-40 {
  --background-opacity: 0.6;
}

.opacity-20 {
  --background-opacity: 0.8;
}

<div class="black background opacity-100"> 100% opacity </div>
<div class="black background opacity-80"> 80% </div>
<div class="black background opacity-60"> 60% </div>
<div class="black background opacity-40"> 40% </div>
<div class="black background opacity-20"> 20% </div>

对于您的用例，可能的解决方案是使用伪（before/after）元素。你可以分别为它指定背景色和不透明度。

我发现最好的方法是使用rgb值来存储颜色变量，然后在颜色的rgba声明中调整不透明度：

$bg-red: rgb(255, 0, 0);

.bg-red {
   background: $bg-red
}

.bg-red-50{
   background: rgba($bg-red, 0.5)
}