【伯樂線上提示】：① 5月6日，谷歌開發者中心推出了一個 Web 開發最佳實踐手冊。伯樂線上資源頻道摘編該資源後，已邀請一些關注 Web 開發的朋友參與翻譯手冊。② 由於譯者朋友幾乎都是已在職，都是在工作之餘參與，每位的翻譯進度會不一樣（請理解），所以手冊中文版不會按照英文版章節順序釋出。③ 手冊中文版尚不完整，請不要轉載，謝謝合作。
【導讀】：CSS 的 background 屬性是向元素新增複雜影象的有利工具，讓新增多張圖片，或者重複圖片等更加簡單。與媒體查詢結合時，background屬性變得更加強大，能做到按照螢幕解析度，可視區域大小等有條件地載入背景圖片。
本節內容
- 為圖片載入或藝術指導使用媒體查詢
- 使用image-set提供高解析度圖片
- 使用媒體查詢提供高解析度圖片或者藝術指導。
概要
- 考慮顯示裝置的特徵，使用最好的圖片，包括考慮螢幕大小，裝置解析度和頁面佈局。
- 在CSS中更改
background-image屬性，為高DPI的裝置使用媒體查詢的min-resolution和-webkit-min-device-pixel-ratio屬性。 - 使用 srcset 屬性，在提供原始1x大小影象的基礎上提供高解析度影象。
- 在使用JS影象的替代技術時考慮花費的效能，或者在低解析度裝置上使用高壓縮的高解析度圖片。
為圖片載入或藝術指導使用媒體查詢
媒體查詢不僅影響頁面佈局，還可以根據可視區域寬度有條件地載入圖片，提供藝術指導。
在上面的例子中， 小螢幕上只會下載顯示small.png並應用到div上，而大螢幕上會將background-image: url(body.png)應用到body上，同時background-image: url(large.png)應用到 div上。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.example { height: 400px; background-image: url(small.png); background-repeat: no-repeat; background-size: contain; background-position-x: center; } @media (min-width: 500px) { body { background-image: url(body.png); } .example { background-image: url(large.png); } } |
使用image-set提供高解析度圖片
CSS中的image-set()函式增強了background屬性的表現，使得為不同的裝置特性提供不同的圖片變得更容易。這允許瀏覽器根據裝置特性選擇最佳影象，例如在2x大小的螢幕上顯示2x的影象，或者在網路頻寬受限時顯示1x大小的圖片。
|
1 2 3 4 |
background-image: image-set( url(icon1x.jpg) 1x, url(icon2x.jpg) 2x ); |
載入了正確的圖片，瀏覽器也會將它調整到合適的大小。換句話說，瀏覽器假設2x大小的圖片是1x大小圖片的二倍，於是便會以2倍的比例縮小2x大小的圖片，所以頁面上的圖片大小看上去是一致的。
對 image-set() 函式的支援還很新，並且僅僅在帶有-webkit 廠商字首的Chrome和Safari瀏覽器中支援。另外還要考慮當 image-set() 不起作用的時候設定備用圖片的情況，例如：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.sample { width: 128px; height: 128px; background-image: url(icon1x.png); background-image: -webkit-image-set( url(icon1x.png) 1x, url(icon2x.png) 2x ); background-image: image-set( url(icon1x.png) 1x, url(icon2x.png) 2x ); } |
上面的樣式會在支援image-set的瀏覽器中載入合適的資源，而在不支援的時候使用1x大小的資源。最需要注意的問題是瀏覽器對 image-set() 的支援還不夠，大多數瀏覽器還是會得到1x大小的資源。
使用媒體查詢提供高解析度圖片或者藝術指導。
媒體查詢規則建立在裝置寬高比之上，讓它可以為2x或者1x大小螢幕指定不同的圖片。
|
1 2 3 4 5 |
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) { /* High dpi styles & resources here */ } |
Chrome, Firefox 和 Opera 瀏覽器都支援標準的 (min-resolution: 2dppx)屬性，而Safari和Android瀏覽器都需要寫上廠商字首，並且去掉dppx單位。請記住，這些樣式只會在滿足媒體查詢的時候載入，而你必須指定最基本的樣式。指定基本樣式的做法能保證即使瀏覽器不支援特定解析度的媒體查詢，也能渲染某些東西。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.sample { width: 128px; height: 128px; background-image: url(icon1x.png); } @media (min-resolution: 2dppx), /* Standard syntax */ (-webkit-min-device-pixel-ratio: 2) /* Safari & Android Browser */ { .sample { background-size: contain; background-image: url(icon2x.png); } } |
你也可以根據可視區域大小使用 min-width 語法顯示替代圖片。這項技術的好處在於，如果媒體查詢不匹配日，影象便不會下載。例如， bg.png 只在瀏覽器的寬度為500px或者更大的寬度上才會下載並應用到 body 上：
|
1 2 3 4 5 |
@media (min-width: 500px) { body { background-image: url(bg.png); } } |