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作为一些随机图像联机时，它会加载它。所以我只能假设问题是我如何指定图像的路径 - 谁能看到我在这里做错了什么？

非常感谢

Answer 1

如果你有任何特殊字符，它们应该被转义，或者在空格的情况下，至少被引用，如下：

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

您可以查看W3C Spec了解完整要求。

出现在不带引号的URI中的某些字符（如括号，逗号，空格字符，单引号（'）和双引号（“））必须使用反斜杠进行转义，以便生成的URI值为URI标记： '（'，'）'，'\，'。

Answer 2

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

我会使用Firebug的“Inspect Element”功能来确定是否有其他背景设置优先。

带空格的网址应始终用引号括起来：

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

Answer 3

如果您使用javascript处理元素，则只需添加“” 如下

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

注意：当然！如果您使用Angular处理打字稿，也可以使用此解决方案

CSS背景 - 图像路径问题

3 个答案: