css - 在 HTML/CSS 中很难使用图像分隔符

Question

我正在创建一个基本网站。我想在网页的两个部分之间使用水平分隔符图像。它现在没有显示。这是我使用的 HTML:

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

这是我的 CSS:

hr.largeseparator {
    border: 0;
    height: 20px;
    background-image: url("divider2.png");
    }

largeseparator {
    border: 0;
    height: 20px;
    background-image: url("divider2.png");
}

该文件与我的 HTML 文件位于同一文件夹中。

这是我使用的实际 HTML:

hr.largeseparator {
  border: 0;
  height: 20px;
  background: url("divider2.png");
}

<h2> Lorem ipsum dolor </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut viverra
  dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p>
</div>
<hr class="largeseparator">
<div id="Text2">
  <h2> Lorem ipsum dolor </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut
    viverra dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p>

Answer 1

你的 css 没有问题，但你可能需要 background-size 并最终重置 background-repeat

hr.largeseparator {
  border: 0;
  height: 20px;
  background: url("http://www.fblakeside.net/hp_wordpress/wp-content/uploads/2015/04/divider-1024x119.png") center;
  background-size: auto 100%
}

hr.no-repeat {
  background-repeat: no-repeat
}

<div>
  <h2> Lorem ipsum dolor </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut
    viverra dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p>
</div>
<hr class="largeseparator" />
<div id="Text2">
  <h2> No repeat separator </h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut
    viverra dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p>
  <hr class="largeseparator no-repeat" />

图像的路径是根据CSS文件所在的路径来考虑的。

您的 CSS 在您的 CSS 所在的文件夹中查找 divider.png。

如果您的网站使用它，您可能还需要注意 urlrewriting。