CSS <HR>隨着裝飾品

我一直在努力與理論上應該是非常簡單的幾天現在......我決心不放棄。CSS <HR>隨着裝飾品

我試圖做到這一點：

enter image description here

本質上的水平線，與之間的裝飾品 - 人力資源將跨越屏幕的整個寬度。

所以我切片我的PSD作爲一個圖像輟學裝飾 - 我試圖覆蓋這個到

集中，但失敗悲慘。

我的標記：

<div> 
    <hr> 
    <img src='assets/img/ornament.png' class='center'> 
</div>

CSS：

hr{ 

height: 2px; 
color: #578daf; 
background-color: #578daf; 
border:0;

}

我只是無法弄清楚如何使圖像出現在人力資源中心....任何幫助或指針，將不勝感激。

來源

2012-01-14 diagonalbatman

添加第二個小時。 – 2012-01-14 13:01:28

@CaseyRobinson不知道我明白嗎？ – diagonalbatman 2012-01-14 13:08:05

你的標記是html4.01 ?? – 2013-08-30 21:14:54

更改的標記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元件內的中心。背景圖像將是與整個頁面背景顏色相同的一塊，但中間有一條水平線。

來源

2012-01-14 13:13:08

這個工作謝謝你:-) – diagonalbatman 2012-01-14 13:35:29

結帳this fiddle。您可以使用ornament類將裝飾圖像設置爲div的背景。

來源

2012-01-14 13:18:53 fivedigit

我試過了，但改變了小提琴中的代碼使用backgound：url（''）;使圖像消失... – diagonalbatman 2012-01-14 13:36:29

對我來說，圖像的路徑可能是不正確的。 – fivedigit 2012-01-14 13:39:14

即興... 使用人力資源和股利重複線段中心的圖片

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

來源

2012-01-14 13:22:10 Robert

啊，太晚了; +） – Robert 2012-01-14 13:38:35

爲什麼一票倒地？ – Robert 2013-07-30 04:20:35

你也可以用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 */ 
}

來源

2013-08-30 20:48:39 dloewen

此解決方案避免使用額外的標記並完全正常工作。 – 2013-08-30 21:16:38

我認爲這是最理想的結果。 – 2015-03-25 13:58:50

給這個男人的答案！ – 2015-10-08 15:01:58

CSS <HR>隨着裝飾品

回答

相關問題