Chrome中的CSS背景图像错误答案

【问题标题】：CSS background image bug in ChromeChrome中的CSS背景图像错误
【发布时间】：2012-09-22 15:53:51
【问题描述】：

我在 Chrome 中遇到了一个奇怪的错误，我将以下 CSS 规则应用于元素：

#element {
  background-color: #0E0F10;
  background-image: url(images/the_background.jpg);
}

现在，当我第一次打开一个包含“#element”的新页面时，直到我使用 ctrl+f5 刷新页面缓存后才会显示背景图像。

我尝试添加 Pragma、Expires 和 Cache-control 元标记，但没有任何区别。唯一能让图片第一次显示的方法就是把绝对url这样放：

#element {
  background-color: #0E0F10;
  background-image: url(http://site.com/images/the_background.jpg);
}

现在的问题是我无法硬编码站点 url，我需要使用相对或相对于根路径的路径。

环顾四周，我发现了一个修复 Chrome 中相关错误的肮脏技巧，巧合的是，它也修复了这个问题：http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/

基本上，当我第一次打开页面时，所有背景图像都会通过 JavaScript 重新加载，从这里开始就可以正常工作了。

但是我想实施更优雅的修复或找到问题的真正原因。

我会很感激任何建议。

【问题讨论】：

你的 css 文件保存在哪里？与您的图像导演的父目录相同吗？如果不尝试使用 url(../images/the_background.jpg)
只是为了它，你能看看它是否改变了将网址放在单引号中的东西吗？
图像的路径很好，我也尝试将路径放在引号中，但没有运气。如果我打开 Chrome 开发人员工具栏，请取消选中并再次检查（禁用-启用）有问题的背景属性，它会在第二次加载图像时正常。
介意粘贴整个 CSS 文件吗？以及您的 html 文件的结构，以便我快速浏览一下？

【解决方案1】：

试试 background: #0E0F10 url('http://site.com/images/the_background.jpg');

另外，请务必为您的选择器添加宽度和高度！

【讨论】：

谢谢，但正如我所说我需要使用相对路径或相对于站点根路径，我不能使用绝对路径，因为在多个网站中使用相同的 css/图像。
加上高度在这里不是问题，错误是我第一次用#element打开新页面时，Chrome不会渲染图像，直到我用ctrl+f5或强制刷新页面要使用 Chrome 开发人员工具栏重新评估的属性。
最后，将路径放在引号中或两者都放入背景属性而不是分隔不会产生任何效果。

【解决方案2】：

在样式规则中使用相对路径解决了我的问题。例如图像 url 是“http://site.com/images/the_background.jpg”，而您的 css 文件 url 是“http://site.com/stylesheet/style.css”，请在样式规则中使用“../images/the_background.jpg”而不是“/images/the_background.jpg”。

【讨论】：

【解决方案3】：

在我相信之前，我碰巧遇到了同样的问题。

由于您尚未接受任何答案。你可能想试试，什么对我有用：

代替：

  background-image: url(images/the_background.jpg);

改成：

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

有了滴答声……这似乎很奇怪，但它对我有用。由于我所有的 url 也有一个下划线，它可能与此有关，虽然我不确定。

无论如何，将网址放在引号中，应该可以正常工作。

【讨论】：

【解决方案4】：

看到这是个老问题。但只是面临同样的问题。我的问题与z-index 有关。例如z-index:2000; 的值增加，现在好像一切正常。只需要检查z-index 的其他元素

【讨论】：

【解决方案5】：

如果你的文件结构是这样的主文件夹 css 图像索引文件然后输入以下语法：

#element{
 background-image: url(../img/example.jpg);
}

写下这段代码，你的错误就会得到解决。

【讨论】：