将引导背景之一更改为透明而不影响文本答案

【问题标题】：Change one of the bootstrap's background transparency without affecting text将引导背景之一更改为透明而不影响文本
【发布时间】：2020-02-25 02:58:30
【问题描述】：

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

我试图覆盖引导设置，创建一个名为 bg-secondary 的 css 样式，不透明度为 0.6，但它也使文本更透明，我不希望这样，我只是想让背景更透明

我的 div：

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

风格

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

很抱歉问了这么基本的问题，但我真的很困惑。

【问题讨论】：

标签： html css

【解决方案1】：

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

例子：

而不是这个：

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

试试这个：

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

【讨论】：

不起作用，根本不改变背景的不透明度
我保证会。在引导程序的 css 之后加载您的自定义 css 文件...tutorials.jenkov.com/css/precedence.html
它不在自定义 css 文件中，它在我的 html 文件中的样式标签中
把它放在它自己的文件里。 codeconquest.com/…
@FAKETAXI，它是否在自定义文件中并不重要 - 它需要在引导导入之后定义并且它需要 !important 后缀（因为引导声明是：background-color: #6c757d!important;)。

【解决方案2】：

是的，使用 css rgba(red, green, blue, opacity) 专门在父元素的背景属性上设置不透明度。

但请注意，Bootstrap v4 设置了 css：

.bg-secondary {
   background-color: #6c757d!important;
}

另外，由于十六进制 rgba() 仍然是lacking comprehensive browser support，建议将convert hexadecimal #6c757d 转换为十进制等效值。在您的情况下，引导覆盖将是：

.bg-secondary {
  background-color: rgba(108, 117, 125, 0.6) !important;
}

为了让您的样式覆盖引导程序的样式定义，您必须在引导程序样式表之后定义它，并同时使用!important 后缀。

【讨论】：