傳統(tǒng)的智慧是大的圖像出售。有點主觀意見告訴我們，大的圖像是漂亮的。不管是什么原因，我們喜歡我們的大畫面。更重要的是，我們真的很喜歡把它們放在背景上，把大的文字放在上面。
我不在這里討論我們是否應(yīng)該這樣做。即使我認(rèn)為大背景圖像是網(wǎng)頁設(shè)計的禍根（我沒有），人們會繼續(xù)使用他們。，包括我。他們是大。他們很漂亮。什么不喜歡？
他們在我們的工具箱里有自己的位置，但我們需要做他們的權(quán)利。我不只是在談?wù)撨x擇正確的圖像，這取決于你。我說的是確保我們的照片不會謀殺人們的帶寬。如果我們真的要設(shè)計“移動第一”，那就必須包含我們的圖像。
問題
現(xiàn)在，當(dāng)人們想把一個頁面的背景，甚至只是一個相當(dāng)大的div，他們往往只是用CSS這樣（我使用的每個屬性分別為清晰）：
體，bigdiv {。
背景圖像：URL（路徑/ JPG圖像。）；
背景大?。悍饷妫?/span>
}
現(xiàn)在，這是良好的臺式機和任何互聯(lián)網(wǎng)連接與無限的數(shù)據(jù)，但如果越來越多的移動用戶想玩的話？你真的要讓他們下載，潛力巨大。JPEG到他們的移動電話，他們實際的資金成本？
閱讀更多關(guān)于響應(yīng)性設(shè)計：
響應(yīng)的設(shè)計：使你的字體工作
保持競爭力-學(xué)習(xí)反應(yīng)設(shè)計
響應(yīng)圖像-為什么它是一個必須和4種方式來做
響應(yīng)式設(shè)計：你需要知道的
為智能設(shè)計設(shè)計書籍
我們有三個解決方案，給我們響應(yīng)的背景圖像：
傳媒查詢
圖像設(shè)置屬性
絕對響應(yīng)的背景圖像（稍后）
傳媒查詢
這一個是顯而易見的解決方案。你定義了一個小背景圖像。然后，對于越來越大的屏幕大小，你使用媒體查詢來定義越來越大的背景圖像。
例如，你可以使用CSS這樣：
body {
背景：URL（圖片/小圖像。JPG）；
}
“媒體屏幕（最小寬度：700px）{
body {
背景：URL（圖片/大圖。JPG）；
}
}
優(yōu)點
這是明顯的解決辦法，真的。我們使用純CSS，沒有改變的標(biāo)記。
問題
這種方法有一個問題：移動瀏覽器，尤其是較舊的，會傾向于下載所有的圖像，擊敗的目的。好消息是，有解決方法。壞消息是：他們的解決方法。默認(rèn)情況下，他們有點臃腫。
然而，他們工作的很好。如果你想學(xué)習(xí)它們，看看這個：媒體查詢和資產(chǎn)下載結(jié)果
圖像集
所有圖像集所做的是提供一個列表的圖像通常都是相同的，除了大小。與srcset HTML屬性，瀏覽器將決定自己的形象是最好的下載，基于設(shè)備。
我為這些解決方案的源文件，所以你可以看到他們的行動。你可以下載下面的。現(xiàn)在，這里是你需要知道的：
的HTML
<！DOCTYPE HTML >
< HTML郎=“en”>
<head>
<元字符集=“UTF-8”>
<標(biāo)題>純CSS背景圖像演示響應(yīng)</名稱>
< /頭>
< body >
< H1 >純CSS背景圖像演示響應(yīng)<< / H1 >
＜／body >
/ HTML > <
CSS的（基本）
body {
背景圖像：圖像集
URL（常規(guī)圖像。JPG）1，
URL（雙大小的圖像。JPG）2X
）；
}
問題
讓我們撇開一個瞬間，這一事實：瀏覽器對圖像集的支持是不可能的。讓我們忽略你需要做這個工作的供應(yīng)商前綴。真正的問題是，圖像不是基于屏幕/視口的大小選擇，但基于像素密度。
這意味著它是偉大的視網(wǎng)膜屏幕和正常的類型之間切換。需要一個更大的圖像的那些巨大的iMac的屏幕？這里的圖像設(shè)置功能是幫助。如果這是你所需要的，然后為你設(shè)置圖像。
你可以使用它的圖像，是小的反正：圖標(biāo)，配置文件，和其他東西的那種。這些都是足夠小，他們不會打破移動用戶的數(shù)據(jù)計劃。但是，嘿，我們需要大量的背景圖像，對嗎？所以這個解決方案還沒有準(zhǔn)備好。
網(wǎng)站建設(shè)絕對響應(yīng)背景圖像
所以現(xiàn)在，我們所看到的，我們所需要的：響應(yīng)圖像，基于屏幕/視口大小的選擇，我們希望瀏覽器只下載其中的一個。猜什么？我們可以這樣做。
壞消息是，它需要改變你的標(biāo)記。然而，這種變化是微乎其微的。所有您需要做的就是添加一個DIV，和背景圖像本身。