背景图像CSS无法正常工作 [英] background-image css not working

问题描述

我正在使用Bootstrap构建一个简单的站点，但似乎无法使背景图像CSS样式起作用.我想将其放在我的网站的第一部分-.jumbotron div上(除导航栏之外，有些人称其为英雄部分).

I'm building a simple site with bootstrap and I can't seem to get the background-image css styling to work. I want to put it on my .jumbotron div which is the first section of my website (besides the navbar, some would call it the hero section).

这是我的代码，我在哪里出错了?

Here is my code, where did I go wrong?

.main-banner {
    background-image: url("../img/collection-of-classic-cars.jpg") no-repeat;
}

<section>
    <div class="jumbotron">
        <div class="container">
            <div class="main-banner"></div>
            <h1>Welcome!</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a class="btn btn-primary btn-lg" href="#name" role="button">Contact us</a>
        </div>
    </div>
</section>

文件路径:

/img/collection-of-classic-cars.jpg

推荐答案

请注意，图片网址应为相对于样式表，而不是所提供的HTML.因此，很可能您的图像路径不正确.其他非常常见的错误是文件名不匹配.在类似Unix的系统中， FOO.jpg 与 foo.jpg 不同.

Note that the image URL should be relative to the stylesheet not the HTML you are serving. So most likely your image path is not correct. Other very common mistake is mismatch in the file name. FOO.jpg is not the same as foo.jpg in unix like systems.

这篇关于背景图像CSS无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！