在 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

它按预期工作，请验证您的图片来源..

hr.largeseparator {
  border: 0;
  height: 20px;
  background: url("http://placehold.it/350x150");
}

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

您的 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。

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

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

Having hard time with image separator in HTML/CSS

html

css

webpage

web