html - 使用图片作为上下网站内容的分割线

Question

我正在尝试在我的网页中的上段内容和下段内容之间使用彩色图片，例如水平分割线。但问题是，虽然我在CSS代码中为.hr类设置了图片为背景，但图片分割线上方还是出现了一条灰线。如何去掉图片上方的线？

我正在使用的 HTML 如下:

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

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

我曾尝试更改 div.hr 属性以重叠该行，但没有任何效果。请帮忙。

Answer 1

您不需要保留 <hr>元素，因为 div.hr当前充当水平规则。

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