CSS 背景图片 URL 加载失败
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6401865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS background image URL failing to load
提问by brsbilgic
I'm trying to use background image in CSS but even though I gave the full path of the image, it doesn't work. Firebug shows "Failed to load given URL". I'm sure that there is no permission problem in that folder. My CSS class is
我正在尝试在 CSS 中使用背景图像，但即使我提供了图像的完整路径，它也不起作用。Firebug 显示“无法加载给定的 URL”。我确定该文件夹中没有权限问题。我的 CSS 类是
body {
background: url("H:/media/css/static/img/sprites/buttons-v3-10.png") repeat-x scroll left -800px #DCDCDC;
color: black;
font: 13px/1.2em arial,helvetica,clean,sans-serif;
height: 100%;
position: relative;
}
What could be causing the issue?
什么可能导致问题？
回答by Pekka
You are using a local path. Is that really what you want? If it is, you need to use the file:///prefix:
您正在使用本地路径。这真的是你想要的吗？如果是，则需要使用file:///前缀：
file:///H:/media/css/static/img/sprites/buttons-v3-10.png
obviously, this will work only on your local computer.
显然，这仅适用于您的本地计算机。
Also, in many modern browsers, this works only if the page itself is also on a local file path. Addressing local files from remote (http://, https://) pages has been widely disabled due to security reasons.
此外，在许多现代浏览器中，这仅在页面本身也在本地文件路径上时才有效。由于安全原因http://，从远程 ( , https://) 页面寻址本地文件已被广泛禁用。
回答by Genko
I know this is really old, but I'm posting my solution anyways since google finds this thread.
我知道这真的很旧，但我还是发布了我的解决方案，因为谷歌找到了这个线程。
background-image: url('./imagefolder/image.jpg');
That is what I do. Two dots means drill back one directory closer to root ".." while one "." should mean start where you are at as if it were root. I was having similar issues but adding that fixed it for me. You can even leave the "." in it when uploading to your host because it should work fine so long as your directory setup is exactly the same.
这就是我所做的。两个点表示向后回溯一个更靠近根目录“..”的目录，而一个“.” 应该意味着从你所在的地方开始，就好像它是 root 一样。我遇到了类似的问题，但添加它为我修复了它。你甚至可以离开“。” 在上传到您的主机时，它应该可以正常工作，只要您的目录设置完全相同。
回答by Kamil
Source location should be the URL (relative to the css file or full web location), not a file system full path, for example:
源位置应该是 URL（相对于 css 文件或完整的 Web 位置），而不是文件系统的完整路径，例如：
background: url("http://localhost/media/css/static/img/sprites/buttons-v3-10.png");
background: url("static/img/sprites/buttons-v3-10.png");
Alternatively, you can try to use file:///protocol prefix.
或者，您可以尝试使用file:///协议前缀。
回答by kleinohad
source URL for image can be a URL on a website like http://www.google.co.il/images/srpr/nav_logo73.pngor https://https.openbsd.org/images/tshirt-26_front.gifor if you want to use a local file try this: url("file:///MacintoshHDOriginal/Users/lowri/Desktop/acgnx/image s/images/acgn-site-background-X_07.jpg")
图像的源 URL 可以是网站上的 URL，如http://www.google.co.il/images/srpr/nav_logo73.png或https://https.openbsd.org/images/tshirt-26_front.gif或如果你想使用本地文件试试这个： url("file:///MacintoshHDOriginal/Users/lowri/Desktop/acgnx/image s/images/acgn-site-background-X_07.jpg")
