[英]CSS background-image not loading
I am having an issue getting my background-image to load as a live website (using github pages).我在将背景图像加载为实时网站时遇到问题(使用 github 页面)。 When i load it locally I can get it to work by entering in the full directory.
当我在本地加载它时,我可以通过输入完整目录来使其工作。 However when I then move it to Github the directory changes and so it no longer works.
但是,当我将其移至 Github 时,目录会更改,因此它不再起作用。 To summarise, when I use
background-image url("images/picture.jpg");
总而言之,当我使用
background-image url("images/picture.jpg");
it will not work at all.它根本不起作用。 I have to type in
background-image url("c/onedrive/webroot/images/picture.jpg");
我必须输入
background-image url("c/onedrive/webroot/images/picture.jpg");
so the whole file name.所以整个文件名。 However that does not work when put onto Github.
但是,当放在 Github 上时,这不起作用。 Any help would be much appreciated.
任何帮助将非常感激。 (:
(:
As others mentioned, it seems like a file path issue.正如其他人提到的,这似乎是一个文件路径问题。 When using relative paths like
images/picture.jpg
, make sure the target image is in the correct relative location as indicated.使用
images/picture.jpg
等相对路径时,请确保目标图像位于正确的相对位置,如图所示。 If your images
folder is located at the project root, your background-image url had safer/better be /images/picture.jpg
with the /
at the beginning to denote the project root.如果您的
images
文件夹位于项目根目录下,那么您的背景图像 url 更安全/最好是/images/picture.jpg
,其中/
开头表示项目根目录。
Update更新
Looking at your code on the repo, I fixed it by updating the relative path — background-image: url("../images/abstract.jpg");
查看您在 repo 上的代码,我通过更新相对路径来修复它 -
background-image: url("../images/abstract.jpg");
Your folder structure looks like...您的文件夹结构看起来像...
/
|
├── css/
├── images/
├── js/
├── objects/
└── video/
Since your stylesheet in css
folder is pointing to a file in images
folder, you'd need to use a correct relative path.由于
css
文件夹中的样式表指向images
文件夹中的文件,因此您需要使用正确的相对路径。
I have faced this problem before.我以前遇到过这个问题。 If you're background-image doesn't work check if your path is correct you could also right click the image in the file browser open Properties --> Security and copy the path from there.
如果您的背景图像不起作用,请检查您的路径是否正确,您也可以右键单击文件浏览器中的图像打开属性 --> 安全并从那里复制路径。 If this doesn't work copy the image address directly from the browser and paste it there.
如果这不起作用,请直接从浏览器复制图像地址并将其粘贴到那里。
Check your path is correct检查您的路径是否正确
body {
background-image: url("path_of_image_from_this_page.jpg");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.