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

我正在创建一个基本网站。我想在我的网页的两个部分之间使用水平分隔符图像。它现在没有显示出来。这是HTML，我已经使用：在HTML/CSS中使用图像分隔符很困难

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

来源

2017-04-20 Pepo

请勿添加其唯一目的是作为分隔符的元素。这就是保证金。 – Rob

有什么不对你的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。

来源

2017-04-20 13:08:39

非常感谢！奇怪的是，有些文件正在工作，有些则没有。但现在一切都很好。 – Pepo

它工作正常验证图像源..

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>

来源

2017-04-20 12:59:58

谢谢你的回答！认为我做到了。 – Pepo

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

回答

相关问题