CSS <HR> With Ornament

Question

我一直在为一些理论上应该非常简单的东西而奋斗......我决心不放弃.

我想要实现这个目标:

基本上水平的规则,在它之间有一个装饰 - HR将跨越屏幕的整个宽度.

所以我切片我的PSD将装饰作为图像丢弃 - 我试图将其叠加到一个

---

中心,但悲惨地失败.

我的标记:

<div>
  <hr>
  <img src='assets/img/ornament.png' class='center'>
</div>

CSS:

hr{

height: 2px;
color: #578daf;
background-color: #578daf;
border:0;

}

我只是想弄清楚如何使图像出现在HR的中心....任何帮助或指针将不胜感激.

Answer 1

您还可以使用CSS伪元素来完成此操作.HTML所需要的只是 <hr>

hr:after { 
    background: url('yourimagehere.png') no-repeat top center;
    content: "";
    display: block;
    height: 30px; /* height of the ornament */
    position: relative;
    top: -15px; /* half the height of the ornament */
}

Answer 2

更改标记 tp

<div class='hr'>
  <hr>
  <img src='assets/img/ornament.png' alt=''>
</div>

将以下内容添加到样式表中，将 16px 替换为取决于图像高度和预期字体大小的合适值。

.hr {  text-align: center; }
.hr img { position: relative; top: -16px; }

然而，更好的方法是仅使用一个图像，该图像位于div具有水平重复的合适背景图像的元素内的中心。背景图像将是与整个页面背景颜色相同但中间有一条水平线的一块。