CSS背景图片路径问题

Question

我在CSS样式表中加入了以下代码：

#framecontentTop{
position: absolute;
top: 0;
left: 120px;
right: 0;
height: 100px;
overflow: hidden;
background-image: url(/Users/myname/Website Project/logo.jpg);
color: white;
}

其中，我想将路径为/Users/myname/Website Project/logo.jpg的图片作为背景显示。

然而，当我在ID为framecontentTop的div中添加这段代码时，背景图片（或任何内容）都没有显示出来。CSS中也没有其他会影响它的div，而且当我将framecontentTop的背景设置成颜色或者设置一个在线随机图片的URL作为背景时，它可以正常加载。所以，我只能认为问题出在我对图片路径的指定上-有人能看出我做错了什么吗？

非常感谢！

- Deacon

Answer 1

如果您有任何特殊字符，它们应该被转义，或者在空格的情况下至少加上引号，像这样：

background-image: url("/Users/myname/Website Project/logo.jpg");

你可以查看W3C规范以获取完整要求。

在未使用引号的URI中出现的某些字符，如括号、逗号、空格字符、单引号（'）和双引号（"），必须用反斜杠进行转义，以使得生成的URI值成为一个URI标记：'(', ')', '\,'。

- Nick Craver

---

谢谢，我尝试了Jesse上面建议的方法，但仍然得不到任何结果！ - Deacon

@Nick - 不，目前这一切仍然是本地的，所以它的路径是file:///Users/myname... - Deacon

@Deacon - 那样是行不通的，它正在寻找相对于网站根目录的内容。你能让它变成相对路径吗？只需要 url(logo.jpg) 就可以了。 - Nick Craver

@Nick - 再次感谢，我尝试了一下，奇怪的是它可以使用同一目录中的另一张图片...但不是我想要的那张图片？！现在我真的不知道问题出在哪里了！ - Deacon

@Deacon - CSS文件是否与图像位于同一目录中？如果不是，它们之间的关系是什么？ - Nick Craver

终于解决了，原来问题完全不同——由于某种原因，我想要的JPG文件保存为文档格式（？！），所以需要进行转换。感谢您的帮助，我选择了这个答案 :) - Deacon

Answer 2

您正在使用绝对路径，它将始终解析为服务器上相同的URL。如果在元素A中放置它有效，但在元素B中无效，那么问题很可能不在于URL，而是另一个background或background-image设置的干扰。

我建议使用Firebug的“检查元素”功能，查找是否存在其他优先级更高的背景设置。

顺便提一下，带有空格的URL应始终用引号括起来：

background-image: url("/Users/myname/Website Project/logo.jpg");

- Pekka

Answer 3

如果您正在使用JavaScript处理元素，则只需要添加""，如下所示

element.style.backgroundImage = 'url(' + '"' + imageUrlVariable + '"' + ')';

注意: 很明显，如果您正在使用Angular处理TypeScript，则此解决方案也适用。

- Smaillns