CSS <HR>オーナメント付き

Question

私は理論的には数日間は非常にシンプルでなければならない何かに苦労しています...そして私はあきらめないと決めました。

私はこれを達成しようとしています：間の装飾で、

基本的に水平方向のルールを - HRが画面の幅全体に及ぶだろう。

私は自分のPSDをスライスしてイメージとしての装飾品を取り除きました。そして、これをオーバーレイするのをにしようとしていますが、悲惨に失敗しています。

私のマークアップ：

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

CSS：

hr{ 

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

}

私はちょうど画像がHRの中央に表示されるようにする方法を見つけ出すカント....どれでも助けや指導をいただければ幸いです。

Answer 1

変更マークアップ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要素の内部中心だけ画像を使用することです。背景画像は、全体のページ背景と同じ色であるが、中央に水平線を有するものである。

Answer 2

this fiddleをご覧ください。装飾画像はornamentクラスのdivに背景として設定できます。 divのための時間と繰り返し線分のための中央の画像を使用してカフオフ

Answer 3

... ...

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

Answer 4

ます。また、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 */ 
}