CSS 背景图片 URL 加载失败答案

【问题标题】：CSS background image URL failing to loadCSS 背景图片 URL 加载失败
【发布时间】：2011-06-19 10:35:00
【问题描述】：

我正在尝试在 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;
}

可能导致问题的原因是什么？

【问题讨论】：

标签： css url background-image

【解决方案1】：

您正在使用本地路径。这真的是你想要的吗？如果是，则需要使用file:/// 前缀：

file:///H:/media/css/static/img/sprites/buttons-v3-10.png

显然，这仅适用于您的本地计算机。

此外，在许多现代浏览器中，这仅在页面本身也在本地文件路径上时才有效。由于安全原因，从远程（http://、https://）页面寻址本地文件已被广泛禁用。

【讨论】：

【解决方案2】：

我知道这真的很老了，但无论如何我都会发布我的解决方案，因为谷歌找到了这个帖子。

background-image: url('./imagefolder/image.jpg');

这就是我所做的。两个点表示回溯一个更接近根目录“..”的目录，而一个“.”。应该意味着从你所在的位置开始，就好像它是 root 一样。我遇到了类似的问题，但添加它为我解决了问题。你甚至可以留下“。”上传到您的主机时在其中，因为它应该可以正常工作只要您的目录设置完全相同。

【讨论】：

【解决方案3】：

源位置应该是 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");

或者，您可以尝试使用file:/// 协议前缀。

【讨论】：

【解决方案4】：

图像的源 URL 可以是 http://www.google.co.il/images/srpr/nav_logo73.png 或 https://https.openbsd.org/images/tshirt-26_front.gif 等网站上的 URL，或者如果您想使用本地文件，请尝试以下操作：url("file:///MacintoshHDOriginal/Users/lowri/Desktop/ acgnx/image s/images/acgn-site-background-X_07.jpg")

【讨论】：

是的，可以。请参阅上面 Pekka 的回答。