css - 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);
}

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

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

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

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

我会很感激任何建议。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

代替：

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

将其更改为：

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

有滴答声......这看起来很奇怪，但它对我有用。由于我所有的 url 也有一个下划线，它可能与此有关，但我不确定。

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

如果您的文件结构类似于此主文件夹 css img 索引文件，则键入以下语法：

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

写下这段代码，你的 bug 就解决了。

5 回答 5