Chrome中的CSS背景图片错误

Question

我在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);
}

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

环顾四周，我发现了修复Chrome中相关错误的狡猾技巧，巧合地解决了这个问题：http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/

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

但是，我想实现更优雅的解决方案或找到问题的真正原因。

我会感激任何建议。

Answer 1

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

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

Answer 2

在样式规则中使用相对路径解决我的问题。例如图片网址为“http://site.com/images/the_background.jpg”，您的css文件网址为“http://site.com/stylesheet/style.css”，请使用“../images/the_background.jpg”代替“/images/the_background.jpg”风格规则。

Answer 3

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

因为您还没有接受任何答案。您可能想尝试一下，对我有用的是什么：

而不是：

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

将其更改为：

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

有了滴答声......这看起来很奇怪，但它对我起了作用。由于我的所有网址都有下划线，因此可能与此有关，但我不确定。

无论如何，将url放在引号中，应该可以使它工作。

Answer 4

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

Answer 5

如果您的文件结构是这样的 主资料夹 的CSS img 索引文件 然后输入以下语法：

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

请使用此代码解决您的错误。