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

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