Bootstrap5中<hr>标签设置背景色不准确该如何解决？

问题原因 #

Bootstrap 5 为 <hr> 标签默认设置了 opacity: 0.25 的样式规则，这会让你自定义的 background-color 被叠加透明度，最终显示的颜色和你设置的色值存在偏差，这是Bootstrap 5 与 Bootstrap 4 在hr默认样式上的核心差异。

修复方案 #

• 方案1：全局覆盖hr的默认透明度
  在自定义CSS中添加以下规则，全局重置hr的透明度即可让自定义背景色正常显示：

  hr {
    opacity: 1;
  }
  

• 方案2：局部修改单个hr的透明度
  如果不需要全局修改，只需要给指定的hr添加自定义类或者行内样式即可：

  <!-- 行内样式写法 -->
  <hr style="opacity:1;background-color:#你需要的色值">
  
  <!-- 自定义类写法 -->
  <style>
    .hr-normal {
      opacity: 1;
    }
  </style>
  <hr class="hr-normal" style="background-color:#你需要的色值">
  

• 方案3：直接使用border属性设置颜色
  Bootstrap 5的hr默认通过border实现基础样式，你也可以直接修改border-color实现无偏差的颜色设置，不需要调整透明度：

  hr {
    border-color: #你需要的色值;
  }
  

注意事项 #

• 如果你同时设置了height属性自定义hr高度，建议优先使用修改opacity+background-color的方案，避免border带来的额外高度影响布局。
• 不要同时设置background-color和border-color，避免出现样式叠加导致的二次色偏。

内容的提问来源于stack exchange，提问作者rayhan aulian