Bootstrap 5上的<hr>标签有不同的颜色吗？

Question

当我使用<hr>并想要添加背景色时，我在使用bootstrap-5版本时遇到了问题。颜色不准确：

这是使用bootstrap 4 https://i.stack.imgur.com/QIY0P.png

这使用bootstrap 5 https://i.stack.imgur.com/Drlow.png

我试过使用很多颜色，结果都是一样的，对于bootstrap 5来说不太准确。

有没有人有同样的问题？有谁知道如何修复它吗？

Answer 1

通过检查Bootstrap 5应用于hr标记的css，您可以在bootstrap-reboot.css文件中找到以下几行。

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

不透明度设置为0.25是导致您提到的问题的原因。如果你想要一个完全饱和的颜色，只需用下面的css代码覆盖不透明度即可。

hr {
    opacity: 1;
}