CSS 背景图像路径问题答案

【问题标题】：CSS Background-Image Path IssuesCSS 背景图像路径问题
【发布时间】：2011-01-25 05:00:06
【问题描述】：

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

非常感谢

【问题讨论】：

标签： css background-image

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

谢谢，我和 Jesse 上面的建议一起尝试了这个，我仍然得到相同的（缺少）结果！
@Nick - 不，这一切目前仍然是本地的，所以它的路径是 file:///Users/myname ... ...
@Deacon - 那不行，它正在寻找与网站根目录相关的东西。你能把它变成相对的吗？就url(logo.jpg)?
@Nick - 再次感谢，我试了一下，奇怪的是它适用于同一目录中的另一个图像......但不是我想要的特定图像？！我真的不明白现在是什么问题！
@Deacon - CSS 文件是否与图像在同一目录中，如果不是，它们是如何相关的？

【解决方案3】：

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

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

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

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

【讨论】：