html - 背景图像 CSS 不工作

Question

我正在使用 bootstrap 构建一个简单的网站，但我似乎无法使背景图像 css 样式正常工作。我想把它放在我的 .jumbotron div 上，这是我网站的第一部分(除了导航栏，有些人会称之为英雄部分)。

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

.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

Answer 1

请注意，图片网址应为 relative to the stylesheet不是您所服务的 HTML。所以很可能你的图像路径不正确。另一个非常常见的错误是文件名不匹配。 FOO.jpg 与类 unix 系统中的 foo.jpg 不同。