风格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创建线条？这样您就不必在图像上设置背景来掩盖单行.

工作实例:

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 />