我在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相關bug的卑鄙手段，巧合的是它也修復了這個問題:http://blog.andrewcantino.com/博客/2012/02/15/fixing-the-Chrome-background-refresh-bug/

基本上，當我第一次打開頁面時，所有的背景圖片都通過JavaScript重新加載，從現在開始一切正常。

然而，我想實現一個更優雅的修復或找到問題的真正原因。

我將感謝任何建議。

嘗試 背景:#0E0F10網址(' http://site . com/images/the _ background . jpg ')；

另外，一定要給你的選擇器添加一個寬度和一個高度！

在樣式規則中使用相對路徑解決了我的問題。比如圖片url是“http://site . com/images/the _ background . jpg”，而你的css文件url是“http://site . com/style sheet/style . CSS”，用“../images/the_background.jpg "而不是您的樣式規則中的“/images/the_background.jpg”。

就在我相信之前，我碰巧遇到了同樣的問題。

因為你沒有接受任何答案。你可能想試試對我有效的方法:

而不是:

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

將其更改為:

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

有虱子...這看起來很奇怪，但對我來說很有效。因為我所有的網址都有一個下劃線，它可能與此有關，雖然我不確定。

無論如何，把網址放在引號里，應該可以讓它工作。

看到這是一個老問題。但卻面臨著同樣的問題。我的問題與z-index有關。例如z指數的增加值:2000；現在好像一切正常。只需要檢查其他元素的z索引

如果你的文件結構是這樣的 主文件夾 鋼性鑄鐵 img 索引文件 然后鍵入以下語法:

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