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 ?>);"/>