15

在我的 CSS 中，我有以下内容：

#framecontentTop{
位置：绝对；
顶部：0；
左：120px；
右：0；
高度：100px；
溢出：隐藏；
背景图片：url（/Users/myname/Website Project/logo.jpg）；
白颜色;
}

我想用作背景图像的图像的路径是 /Users/myname/Website Project/logo.jpg

但是，当我使用 ID framecontentTop 放入我的 div 时，它不会将图像（或实际上任何东西）显示为背景。CSS 中没有其他 div 与之冲突，当我将 framecontentTop 的背景设置为一种颜色或将其保留为图像但将 URL 作为一些随机图像在线放置时，它会很好地加载它。所以我只能假设问题在于我如何指定图像的路径 - 谁能看到我在这里做错了什么？

非常感谢

4

3 回答 3

33

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

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

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

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

于 2010-03-08T22:41:50.697 回答
6

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

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

顺便说一下，带有空格的 URL 应该总是用引号引起来：

background-image: url("/Users/myname/Website Project/logo.jpg");
于 2010-03-08T22:40:44.907 回答
1

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

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

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

于 2020-07-28T10:57:15.057 回答