css - 无法使用Bootstrap上传背景图片

Question

我在尝试将背景图片上传到我正在构建的页面时遇到问题。

我正在使用 Bootstrap 并创建了一个带有自定义类的 div。我想使用 CSS 添加背景图片，但有些东西不起作用。这是我写的代码

.homeinner {
  background-image: url("/.../../name.jpg");
  height: 100%;
}

<div class="homeinner">
</div>

如果这个问题看起来很幼稚，请原谅，我是编码的新手，在写这篇文章之前，我已经尝试了数小时不同的解决方案。

问题不在于图像的大小或比例:它根本不显示 :(

你能帮帮我吗？

Answer 1

在您的 CSS 代码中，您指的是域根目录上方 2 步的图像。

folder 1/  <-- This is the folder the image needs to be in with your current CSS
└─ folder 2/
   └─ domain/

请注意，这只有在文件由实际域提供时才有可能。否则，前导 / 指的是计算机/服务器中磁盘的根目录，而随后的 ../../ 将尝试提升 2 个目录(进入void 之类的，这是不可能的)。

根据提供的文件结构，在这个答案的底部，您应该能够只使用 CSS 文件中图像本身的相对路径(没有前导 /)。下面的 CSS 应该可以解决它

.homeinner {
  background-image: url("../img/name.jpg");
}

这会将一个目录向上移动到文件夹assets(../ 部分)并引用图像name.jpg文件夹 img.

注意:此路径没有前导斜杠 /。这就是为什么它被称为相对路径的原因，因为它的起点是 CSS 文件所在的位置。

文件夹结构:

root/
└─ assets/
   ├─ index.html
   ├─ img/
   |  └─ name.jpg
   └─ css/
      └─ index.css