Bootstrap 5 背景颜色具有不透明度答案

【问题标题】：Bootstrap 5 background color is having opacityBootstrap 5 背景颜色具有不透明度
【发布时间】：2022-02-08 04:47:32
【问题描述】：

我正在尝试创建 OR 分隔符，但在引导程序 5 中它无法正常工作，而在引导程序 4 中工作正常。在我的项目中，正在使用引导程序 5。文本的背景颜色有些不透明。

HTML：

<div class="or-line-block pt-2">
    <h6 class="text-center m-0"><span class="or-txt px-2">OR</span></h6>
    <hr class="or-line">
</div>

CSS：

.or-txt{
    background-color: white;
}
.or-line{
    margin-top: -10px;
    border-color: rgba(#333, 0.1);
}

在引导程序 4 中：

在引导程序 5 中：

有什么问题。请帮忙

【问题讨论】：

这个border-color: rgba(#333, 0.1); 是错误的。请修复它。

标签： html css bootstrap-4 opacity bootstrap-5

【解决方案1】：

我就是这样的

<div style="width: 100%; height: 20px; border-bottom: 1px solid darkgray; text-align: center">
    <span style="font-size: 20px; background-color: white; padding: 0 10px;">
      or<!--Padding is optional-->
    </span>
  </div>

【讨论】：

【解决方案2】：

这是因为 bootstrap 更改了 hr 的 CSS。他们添加了不透明度和其他一些 CSS。请将此添加到您的代码中

hr {
    opacity: 1;
}

【讨论】：

【解决方案3】：

使用::before 和::after 伪元素可能会更好。

CSS

   .or-line::before{
      content: "---------"
   }

   .or-line::after{
      content: "---------"
   }

在content 部分中插入任何内容，它会出现在工作 OR 之前和之后。

HTML

 <h6 class="or-line">OR</h6>

【讨论】：