我在Chrome中遇到了一个奇怪的bug，我正在对一个元素应用以下CSS规则：
#element {
background-color: #0E0F10;
background-image: url(images/the_background.jpg);
}现在，当我第一次打开一个包含“#element”的新页面时，背景图像不会显示，直到我用ctrl+f5刷新页面缓存。
我试着添加了Pragma，Expires和Cache-control meta标记，但没有任何效果。唯一能让图片在第一次显示的方法是这样放置绝对网址：
#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重新加载的，从这里开始，它工作得很好。
然而，我想实现一个更优雅的修复或找到问题的真实的原因。
我会感激你的任何建议。
5条答案
按热度按时间olqngx591#
尝试
background: #0E0F10 url('http://site.com/images/the_background.jpg');另外，一定要为选择器添加宽度和高度！
w3nuxt5m2#
在样式规则中使用相对路径解决了我的问题。比如图片的url是“http://site.com/images/the_background.jpg“，而你的css文件的url是“http://site.com/stylesheet/style.css“，在你的样式规则中使用“../images/the_background.jpg”而不是“/images/the_background.jpg”。
rekjcdws3#
在我相信之前我碰巧遇到了同样的问题。
既然你没有接受任何答案。你可能想试试，什么对我有效：
代替：
将其更改为：
用勾号......看起来很奇怪，但对我来说很有用。因为我所有的网址都有下划线，可能和这个有关，虽然我不确定。
不管怎样，把网址放在引号里，应该能让它工作。
tsm1rwdh4#
看到这是老问题。但刚刚面临同样的问题。我的问题是与
z-index有关。增加的值为例z-index:2000;，现在好像一切正常。只需要检查z-index的其他元素bnl4lu3b5#
如果您的文件结构类似于主文件夹css img索引文件，请键入以下语法：
写这段代码你的bug就会被解决。