css - 用图像风格 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 有白色背景)。

Answer 1

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

工作示例:

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;
}

<hr />