什麼時候使用圖片，何時在網頁設計時使用背景圖片？

我是一個業餘愛好者webdesigner，使用html和CSS來測試各種網站設計。然而，總是讓我困惑的一件事是決定使用圖片作爲標籤，或者通過CSS或HTML將它用作背景。這是他們的經驗法則嗎？什麼時候使用圖片，何時在網頁設計時使用背景圖片？

來源

2012-04-04 Vishwas G

作爲答案之一指出，你需要做出內容和實際頁面風格之間的差異。

讓我詳細說明一下。 background-image屬性的用途是用來定義頁面的某個塊的外觀，無論是div還是p，關鍵在於您要定義頁面的外觀。在定義頁面設計的上下文中（圖案，徽標，漸變等）應該幾乎不會採用img標籤的明確形式。該標籤用於定義內容圖片，這些圖片與手頭新聞相關聯 - 這是您嘗試描繪的故事所特有的內容。

區分這兩個概念非常重要，因爲它可以讓您設想一個獨立於底層內容的良好設計 - 因爲它應該是。 Uniformal，優雅和精確。

所以，在審查。使用background-image來定義構成您網站的各個區塊的外觀，並在您想添加特定於上下文的可視內容時使用經典img標籤。

來源

2012-04-04 20:58:55

很好的回答。也可能值得注意的是，這種思考方式可以（和*應該*）也用於其他元素（例如，應該使用'strong'還是'font-weight：bold'？）。它也可以粗略地翻譯成如何在不同的元素之間進行選擇（例如'div' vs'p' vs'h1'）。測試是否選擇正確的技術/元素的一個好方法是禁用樣式並通過頁面進行閱讀 - 是否存在任何不必要的內容（是表示元素）？或者頁面中提到的任何內容沒有顯示在頁面上（是內容）？ – 0b10011 2012-04-04 21:17:14

感謝您詳細解答我的懶惰答案：D精心設計的迴應！ – 2012-04-04 21:18:54

問題是它內容或造型是繪製圖像線條的好地方。

這張圖片可以重複使用嗎？等等。

來源

2012-04-04 20:48:18

你想讓圖像成爲文檔流程的一部分，給搜索引擎（alt-text）提供描述嗎？使用img標籤。

如果您想在圖片上放置其他元素（如文字，版權信息），請使用背景圖片。你甚至可以通過在背景圖像上放置透明的圖像來獲得一些效果。

此外，背景圖像的定位被用來獲得性能優勢（「精靈」）時存在很多示例。

來源

2012-04-04 21:08:18 initall

什麼時候使用圖片，何時在網頁設計時使用背景圖片？

回答

相關問題