画像を上部と下部ウェッジサイトの間の分割線として使用する

Question

ウェブページ上段の段落の内容と下段の段落の間に分割された水平線のようなカラー画像を使用しようとしています。しかし、問題は、CSSコードで.hrクラスの背景として画像を設定しても、画像分割線の上に灰色の線が表示されることです。画像の上の線を削除するにはどうすればよいですか？私が使用しています

HTMLは以下の通りです：私はラインをオーバーラップするが、何も動作するdiv.hr特性を変更しようとしている

div.hr { 
    background: #fff url(image.png) repeat scroll center; 
    height: 10px 
    } 

：

<p> 
    upper content upper content upper content upper content upper content upper content 
</p> 

<div class="hr"> 
    <hr /> 
</div> 

<p> 
lower content lower content lower content lower content lower content lower content</p> 

は、ここに私のCSSです。助けてください。

Answer 1

現在、div.hrが水平ルールとして動作しているため、<hr>要素を保持する必要はありません。

<div class="hr"></div> 

Answer 2

コードから<hr />を削除します。画像の上に表示されるのは<hr />です。

<p> upper content upper content upper content upper content upper content upper content </p> 

<div class="hr"> 
</div> 

<p> lower content lower content lower content lower content lower content lower content</p>