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元素内，该元素具有水平重复的合适背景图像。背景图像将是与整个页面背景颜色相同但在中间具有水平线的部分。

Answer 3

结帐this fiddle。您可以使用div类在ornament上将装饰图像设置为背景。

Answer 4

脱下袖口...... 使用hr的中心图像和div的重复线段...

    <style>
      .line hr {height: 16px; background: url(as_image.jpg) center center no-repeat;border:0;}
      .line {background: url(as_line.jpg) center repeat-x;}
    </style>

    <div class="line"><hr></div>