风格HR与图像

Question

我正在尝试尽可能接近下面的图像。

我目前使用下面的代码获得以下内容，似乎无法完全按照我的需要进行操作。

当前样式：

我的CSS：

hr:after { 
    background: url('../img/green_leaf.png') no-repeat top center;
    content: "";
    display: block;
    height: 18px; /* height of the ornament */
    position: relative;
    top: -9px; /* half the height of the ornament */
    border: 0;
    color: #d7d7d7;
}

我想加粗线条，如果可能的话，在图像周围添加空格（不要让green_leaf.png有白色bg）。

Answer 1

如何在hr元素中设置图片，并使用:before和:after创建线条？这样你就不必在图像上设置背景以掩盖一行。

工作示例：

＆＃13;

＆＃13;

hr { 
    background: url('http://i.stack.imgur.com/37Aip.png') no-repeat top center;
    background-size: contain;
    display: block;
    height: 18px;
    border: 0;
    position: relative;
}
hr:before,
hr:after {
    content: '';
    display: block;
    position: absolute;
    background: #d7d7d7;
    height: 2px;
    top: 8px;
}
hr:before {
    left: 0;
    right: 50%;
    margin-right: 10px;
}
hr:after {
    right: 0;
    left: 50%;
    margin-left: 10px;
}

＆＃13;

<hr />

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在这篇文章中找到答案Custom <hr> with image/character in the center

我修改了它，我得到了这个：

hr {
  no-repeat top center;
  text-align: center; /* horizontal centering */
  line-height: 1px; /* vertical centering */
  height: 1px; /* gap between the lines */
  border-width: 1px 0; /* top and bottom borders */
  border-style: solid;
  border-color: #676767;
}

hr:after {
  content: ""; /* section sign */
  background: url('smiley.gif') no-repeat top center;
  display: inline; /* for vertical centering and background knockout */
  background-color: white; /* same as background color */
  padding: 0 2em; /* size of background color knockout */
}

注意padding: 0 2em;和background-color: white;。

Answer 3

如果你这样设置，并在图像上指定背景颜色以匹配页面背景中的任何内容（可能是白色），它看起来会很好：

HTML

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

CSS

hr {
    border:none;
    border: 1px solid #d7d7d7;
}

.hr { 
    text-align: center;
}

.hr img {
    position: relative;
    top: -18px;
    background:white;
    padding:0 5px;
}

结果：

Fiddle