css在Chrome瀏覽器中加載背景圖片但不在Firefox中

我開發了一個可以在Chrome中順利運行的網站。但它在Firefox中有問題。它無法加載背景圖片。我不明白爲什麼這發生那樣的情況結帳在Chrome和Firefoxcss在Chrome瀏覽器中加載背景圖片但不在Firefox中

CSS

#background { 
    position: fixed; 
    z-index: 1; 
    background: url("../img/bg/photo_bg.jpg") 50% 50% no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    display: inline-block; 
}

來源

2017-06-29 Darshan Kini

你能做出一個[堆棧摘錄]（https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/），所以我們可以從你的問題在這裏運行它？另請參閱主題上的[mcve]。 – domsson

加左：0，上：0，寬：100vw，高：100vh。應該管用。 –

這對我在兩個瀏覽器都很好：https：//jsfiddle.net/khrismuc/yaae1fh3/ –

-2

應設置顯示爲「塊」。
它應該與此一起工作。

來源

2017-06-29 09:13:31

請[edit]在此添加有意義的代碼和解決方案說明。發佈最小，完整，可驗證示例說明您的解決方案。謝謝：-）！ – Peter

當然，我只是設置顯示器在檢查員中阻止，因爲我在工作中沒有時間做更多事情，對不起。 –

如果您刪除了display: inline-block屬性，它似乎可以在兩個Chrome & FF之間工作。

background { 
    position: fixed; 
    z-index: 1; 
    background: url("../img/bg/photo_bg.jpg") 50% 50% no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    /* display: inline-block; -- remove this */ 
}

似乎有是沒有其他的區別，如果你刪除的屬性，所以在那裏爲什麼它被擺在首位使用的原因是什麼？

也只是一個說明，我注意到有一個media only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all規則使用哪種效果只有鉻/ Safari瀏覽器。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, not all { 
    #background { 
    background: url(../img/bg/photo_bg_%402X.jpg) 50% 50% no-repeat; 
    background-size: cover; 
    } 
}

來源

2017-06-29 09:32:47

其更好的解決方案，謝謝@Nikhil。爲了解釋。現在我知道到底是什麼問題。 –

沒問題@Darshan，你可以標記答案，以便它可以幫助其他人。 –

css在Chrome瀏覽器中加載背景圖片但不在Firefox中

回答

相關問題