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

如果您的网站使用它，您可能还必须介意urlrewrredrrewrred。

Answer 2

它正在按预期工作，验证图像的来源。

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>