未出現在Safari中的CSS背景圖像

我有將背景圖像應用於DIV的非常簡單的任務。我可以使用除Safari之外的其他瀏覽器查看圖像。有人可以看看我的CSS和網站，並告訴我我做錯了什麼。未出現在Safari中的CSS背景圖像

CSS：

#intro2services { 
    background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url(../img/colorpencils.jpg) fixed; 
    background-position: 100% 100%; 
    background-size: cover; 
    background-repeat: no-repeat; 
}

網站： www.designedbysheldon.com

來源

2015-01-02 Sheldon Heath

帶有漸變的圖像顯示在Chrome 39，Safari 8中，但在Firefox（所有Mac）中出現問題。 – Brian

我與您的網站發揮各地幾分鐘，我建議打破了你的風格爲背景，而不是一些冷凝同時讓其他人自己宣佈。你的CSS更改爲：

#intro2services { 
    background-position: 100% 100%; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-image: -moz-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)),url('../img/colorpencils.jpg'); /* Firefox-specific background styles */ 
    background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/colorpencils.jpg'); 
    background-attachment: fixed; 
}

即去除重複，應用的梯度，並應用了cover正常大小。這已經過測試，可以在Chrome和Safari中使用。 Firefox僅在添加-moz供應商前綴時起作用。您可以添加其他供應商前綴以保證安全，但gradients are implemented此時位於其他主流瀏覽器中。

來源

2015-01-03 01:36:08 Brian

這是Safari的一個常見問題。大多數情況下，爲你的風格添加一個負Z指數將解決這個問題。

z-index:-1:

來源

2015-01-17 23:17:46 John

未出現在Safari中的CSS背景圖像

回答

相關問題