Bootstrap 5 背景颜色不透明

Question

我正在尝试创建一个 OR 分隔符，但在 bootstrap 5 中无法正常工作，而在 bootstrap 4 中可以正常工作。在我的项目中，bootstrap 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);
}

在Bootstrap 4:

在Bootstrap 5:

这是什么问题。请帮助

Answer 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>

Answer 2

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

CSS

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

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

在 content 部分中插入任何内容，它将出现在作业前后或。

HTML

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

Answer 3

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

hr {
    opacity: 1;
}

Bootstrap 5 背景颜色不透明

Bootstrap 5 background color is having opacity

html

css

opacity

bootstrap-4

bootstrap-5