使用不同類的CSS背景圖像

我有一個簡單的項目，它有一個產品頁面。飛濺（全寬，固定高度div）將顯示一個背景圖像，該圖像將根據部門而改變。使用不同類的CSS背景圖像

我在我的custom.css文件中創建了使用以下CSS類的啓動<div>。

.page-splash { 
background-position: center; 
background-size: cover; 
background-repeat: no-repeat; 
padding: 180px 50px; 
height:600px; 
}

我已經進一步移動了一步，爲每個我想要使用的背景圖像創建一個單獨的類。

.splash-chocolate { 
background-image: url("abc.jpg"); 
} 
.splash-vegetables { 
background-image: url("123.jpg"); 
}

我稱之爲我的HTML文件中的類新如圖所示，在未來一段下面代碼，這是在故障開始。加載時會導致我的頁面崩潰。

我採取了錯誤的做法嗎？或者我犯了一個我忽略的語法錯誤？（圖片文件/部門名稱，例如巧克力已針對問題進行了簡化）。

<div class="page-splash splash-chocolate"></div>

所有幫助一如既往非常感謝！

來源

2016-02-26 Nathwales

「加載時會導致我的頁面崩潰。」任何錯誤消息或什麼？ –

沒有錯誤信息@BenjaminPoignant它的Firefox只是繼續旋轉像試圖繼續加載，但圖像不顯示。我已經刪除了代碼，並嘗試在一個類中完成所有這些工作，所以我猜測當我嘗試將兩個classess嵌套在一起時會出現錯誤。 – Nathwales

你確定圖像的路徑是正確的。 – Lal

-1

編輯 - 感謝萊納斯修正：

檢查以確保您有正確的URL路徑的圖像。它可能試圖拉的影像，但是無法找到它

如果你的CSS類是在單獨的文件夾，您可能需要在您的網址屬性的路徑來指定正確的文件夾。

2016-02-26 18:25:17 jerellm

哪些屬性？如果你的意思是'背景大小'：即使這樣，圖像應該顯示（儘管大小錯誤），因爲它會被忽略。 –

對不起，我的意思是背景圖像。在w3schools上，它表示IE12完全支持該功能 – jerellm

除了w3schools是一個糟糕的參考，您可能會誤讀表格。它說Edge 12具有完全支持，而IE 4以後版本。事實上，這不是真的，因爲例如IE4不支持漸變，但對圖像使用'background-image'是非常基本的。這與瀏覽器問題非常不同，但是像你這樣的錯誤路徑也指出了。 –

回答