html - 设置一个的背景图像，跨浏览器问题？

Question

hr使用元素插入图像（使用background-image）会有什么问题吗？

我正在寻找一个不错的语义选项来插入用作页面分隔符的英雄图像。我不想使用section，因为它真的没有分段内容。因为它在技术上是内容的标题英雄，所以我可以将它添加到它section下面的顶部……但hr感觉是对的。

一位同事提到他们认为hr只会border-bottom在“某些”（未引用）浏览器中呈现它并忽略所有其他 CSS 属性，但我在任何地方都没有看到记录。

语义/技术思想？你用过hr这种方式吗？

编辑

这是我使用它的方式：

<style>
    .hero_separator {
      display: block;
      border: none;
      height: 428px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
</style>
<hr class="hero_separator" style="background-image: url(<?= $background ?>);"/>

标签： htmlcssbackground-imagesemantic-markuphorizontal-line