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：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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
}

＆＃13;

<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" />

＆＃13;

图像的路径是从CSS文件的路径开始思考。

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

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

在HTML / CSS

2 个答案: