css - 带有视差的 bootstrap 3.1.1 中背景 img 的问题

Question

我在将背景图片添加到我的 Bootstrap 站点时遇到了很大的问题。我正在尝试使用 stellar.js 创建一个视差网站，到目前为止网站工作正常，我在每张幻灯片上都有一些文本，链接滚动到正确的幻灯片等等......但是图像似乎无法加载。我浏览了这个网站、youtube 和许多其他网站，但我似乎无法让 SCSS 图像显示出来，哈哈

我在以下文件夹中获取了我的背景图片。 img/slide1bg.jpg 所以它只有一个目录。也许我遗漏了什么，但我试图结合 here: 中的教程使用 bootstrap...下面的代码对于背景图像工作正常，但在 bootstrap 中它似乎不喜欢它。

我的 HTML:

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="slidetext">
            //text here
        </div>
    </div>
</div>

我的 CSS:

html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

.slide{
position: relative;
background-attachment: fixed;
width: 100%;
height: 100%;
}

#slide1{
color: pink;
background: url('./img/slide1bg.jpg') no-repeat;
background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
.slidetext{
padding-top: 70px;
}

Answer 1

您是否尝试过在 URL 的开头添加一个点 (.)？

这是您输入的内容:

background: url('./img/slide1bg.jpg') no-repeat;

试试这个

background-image: url('../img/slide1bg.jpg') no-repeat;