html - 在不影响文本的情况下更改其中一个 Bootstrap 背景透明

Question

我做了一个带背景的div，在本例中是bg-secondary，我想将背景的透明度设置为0.6，但是，我不想让div里面的文字更透明，只有背景

我试图覆盖 Bootstrap 设置，制作一个名为 bg-secondary 的 css 样式，不透明度为 0.6，但它也使文本更透明，我不想要那样，我只希望背景更透明

我的分区:

<div class="text-light bg-secondary">
    <h3>hi</h3>
      <h5>lorem ipsum<br></h5>
</div>

风格

<style>
    .bg-secondary {
        opacity: 0.6;    
    }
</style>

很抱歉提出这样的基本问题，但我真的很困惑。

Answer 1

不透明度会影响所选元素的子项...请使用 rgba 颜色设置半透明背景。

例子:

取而代之的是:

.bg-secondary {
  background-color: #000;
  opacity: 0.6;
}

试试这个:

.bg-secondary {
  background-color: rgba(0, 0, 0, 0.6);
}