在CSS中存儲所有背景圖片有多糟糕？

我已經創建了網站（模板）的佈局。我使用Photoshop來設計圖片並將其切片以創建div s。它給了我一個包含HTML和CSS代碼的HTML文件。我將它們分成兩個文件HTML和CSS。 <div id="idName">標籤內的背景圖像被稱爲<img src=...標籤。我改變了這一點。我將CSS文件中的圖像加載爲在CSS中存儲所有背景圖片有多糟糕？

idName { background-image: url(URL); }

網站中的所有圖像都像這樣加載，從而創建整個背景。

現在我的問題是：這是一個不好的做法？因爲如果我將圖像留在<div>標籤內，我將無法將我的內容放在圖像上。隨着css文件中的background-image屬性，我可以把我的內容放在任何地方，而不必擔心背景。

來源

2012-01-26 allegjdm93

不錯，所有網頁設計師/開發人員都將圖片存儲在後臺css中。 – 2012-01-26 23:52:25

但這不是_storing_？ - 就像你有css中的數據 - uri圖像一樣） – c69 2012-01-27 00:01:59

這是一個可怕的想法，因爲無數的原因 – 2012-04-09 17:47:35

不，這非常好，實際上可能是背景圖像的最佳實踐。將圖像聲明移動到樣式表中意味着稍後可以下載圖像，但大多數瀏覽器在此期間應該有足夠的其他資源進行加載，並且無論如何您都需要在背景圖像之前優先考慮HTML和樣式表。

只要不使用CSS背景的實際圖像：如果回退的背景顏色將顯著改變的意義（即圖像是內容），你應該使用<img>元素與alt=屬性。如果您不確定這是否是一個好主意，請考慮this question。

要提高性能（通過減少HTTP請求的數量），您可能需要考慮使用CSS sprites。

來源

2012-01-26 23:52:41 phihag

很好的答案。也許只是在如何添加幾個字，而CSS是背景圖像的正確位置，對於作爲內容一部分的圖像，您仍應該使用''標籤（使用適當的替代文本或標題）？你可以鏈接到http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image進一步的指導。 – 2012-01-26 23:58:45

謝謝，補充說。 – phihag 2012-01-27 00:04:03

非常感謝你們。你把我放在正確的軌道上，我現在對我的設計充滿信心！ :) – allegjdm93 2012-01-27 03:30:03

在CSS中存儲所有背景圖片有多糟糕？

回答

相關問題