CSS背景图片无法加载

Question

我遇到了一个问题，让我的背景图片加载为一个实时网站（使用github页面）。当我在本地加载它时，我可以通过输入完整的目录让它工作。但是当我把它移动到Github时，目录发生了变化，所以它不再工作。总之，当我使用 background-image url("images/picture.jpg"); 它将无法工作。我必须输入 background-image url("c/onedrive/webroot/images/picture.jpg"); 所以整个文件名。但是放到Github上就不行了。任何帮助将是非常感激的。(:

Answer 1

正如其他人提到的，这似乎是一个文件路径问题。当使用相对路径时，如 images/picture.jpg请确保目标图像处于正确的相对位置，如图所示。如果您的 images 文件夹位于项目根目录下，你的背景图片url最好是 /images/picture.jpg 随着 / 在开头表示项目根。

更新

看了看你在repo上的代码，我通过更新相对路径来解决这个问题--------。background-image: url("../images/abstract.jpg");

你的文件夹结构看起来像...

/
|
├── css/
├── images/
├── js/ 
├── objects/
└── video/

因为你的样式表在 css 文件夹指向的是 images 文件夹，你需要使用一个正确的相对路径。

Answer 2

我以前也遇到过这个问题。如果你的背景图片不起作用，检查你的路径是否正确，你也可以在文件浏览器中右击图片，打开属性--> 安全性，并从那里复制路径。如果这不起作用，直接从浏览器中复制图片地址并粘贴到那里。

Answer 3

检查你的路径是否正确

body {
 background-image: url("path_of_image_from_this_page.jpg");
}