轉載--使用image-set來優化在retian屏幕下的背景圖片

mage-set對我來講，我也很陌生，因而藉助G爸和度娘海量的搜索image-set，才知道Webkit內核"safari6"和「chrome21」支持CSS4的background-image新規範草案image-set。經過Webkit內核的瀏覽器私有屬性「-webkit」，image-set爲Web前端人員提供了一種解決高分辨率圖像的顯示，用來解決蘋果公司提出的Retian屏幕顯示圖片的技術問題。簡而言之：這個屬性用來支持Web前端人員解決不一樣分辨率下圖片的顯示，特別的（Retina屏幕）。

qq.com就是採用了這種方法，對Logo圖片進行了處理，在普通分辨率下，將調用「qqlogo_1x.png」圖片，而在Retina屏幕下（好比iPhone4s,iPhone5，New iPad等IOS設備）下會調用「qqlogo_2x.png」圖像，從而避免了Logo在Retina屏幕下顯示不清晰的問題。若是這個還不夠幫你不理解，你還能夠看看Jason Grigsby在「Safari6」和「Chrome21」下使用「Webkite」內核瀏覽器的私有屬性寫了一個「測試頁面」。

HTML 結構

<div id="test"></div> 

CSS代碼

#test { background-image: url(assets/no-image-set.png); background-image: -webkit-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x); background-image: -moz-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x); background-image: -o-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x); background-image: -ms-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x); width:200px; height:75px; } 

記得在「HTML5中須要一個自適應的圖像機制」討論中，Bruce Lawson在《HTML5 adaptive images: end of round one》一文中對HTML中的圖片自適應作了詳細的介紹，以及Matt Wilcox在《Responsive images: what's the problem, and how do we fix it?》一文中對Responsive設計中的圖片使用的討論。隨後這樣的討論也停下來了。若是你不知道咱們爲何須要這樣的一種機制，你能夠閱讀一下Matt 「Grrr」 Wilcox的《Responsive images: what’s the problem, and how do we fix it?》一文。

這個時候咱們須要一個像這樣的機制，Webkit實現了一個非標準的功能：-webkit-image-set，這個屬性，前面說過了，他是CSS4中對background-image屬性定義的一種新方法，image-set，接下來咱們看看image-set的使用語法：

image-set的語法

selector { background-image: url(no-image-set.png); background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center; } 

相似於不一樣的文本，圖像也會顯示成不一樣的：

1.  不支持image-set：在不支持image-set的瀏覽器下，他會支持background-image圖像，也就是說不支持image-set的瀏覽器下，他們解析background-image中的背景圖像；
2.  支持image-set：若是你的瀏覽器支持image-sete，並且是普通顯屏下，此時瀏覽器會選擇image-set中的@1x背景圖像；
3.  Retina屏幕下的image-set：若是你的瀏覽器支持image-set，並且是在Retina屏幕下，此時瀏覽器會選擇image-set中的@2x背景圖像。

上面就是有關於「image-set」的簡單介紹。

爲何要使用image-set而不使用Media Queries?

若是你有閱讀有關於Retina的文章，你就會知道，在Retina屏幕下實現圖像顯示的方法有不少種，好比說「img」標籤方法、javascript和方法，還有「Media Queries」方法，特別是「Media Queries」方法（若是你不清楚這些方法，能夠點擊這和這）。既然有這麼多種方法要以實現Retina屏幕下的圖像顯示，那麼爲何還要使用「image-set」方法。這個問題問得很是的好。Jason Grigsby在「Safari 6 and Chrome 21 add image-set to support retina images」中把爲何要使用「image-set」而不使用CSS3的「Media Queries」實現Retina屏幕下圖像方法作了兩點描述。

不像Media Queries，image-set不須要告訴瀏覽器使用什麼圖像，而是直接提供了圖像讓瀏覽器選擇。在將來，我但願有人在使用Retina設備瀏覽網頁，但網速慢時，告訴設備採用低分辨率的圖像。甚至會更好，他能根據網速智能的選擇須要的圖像。

使用「Media Queries」的問題是，在高分辨率顯示器下他沒有選擇的權利。也就是說，瀏覽器分辨率等於1或2或者其餘的時候，瀏覽器必須加載指定的圖像。

image-set的好處是，在支持image-set的瀏覽器會在高分辨下匹配須要的圖像，而沒有其餘額外的功能。但我相信，爲瀏覽器提供不一樣的圖像選擇，這瀏覽器在不一樣的分辨下選擇正確的圖像。

image-set能讓各類不一樣分辨下的圖像都顯示在CSS中的同一個地方。而使用media queries顯示不一樣圖像時，你可能會隔開不少行代碼，難於尋找到對應的圖像。

Jason Grigsby | August 14, 2012

image-set真的好強大，很惋惜的是，他僅支持background-image屬性，而不能使用在「<img>」標籤中。

前面也說過了，目前image-set只能使用webkit瀏覽器的私有屬性「-webkit」在「Safari6」和「Chrome21」下運行。如今在IOS 6獲得支持。不過很遺憾的是，目前別的瀏覽器仍是不支持image-set,如今他僅是CSS4的一個草案，但願未來能寫到標準中，造福於苦逼的前端人員。

image-set雖然目前是一個全新的屬性，沒有幾個瀏覽器支持，但這是一種新技術，咱們須要用起來，只有用的人多了，未來纔有機會寫入標準的規範中，正所謂「世上本無路，走的人多了，路就出來了」。但話說回來，這種技術用來解決Retina屏幕下的圖像顯示，是一種絕佳的方法，若是你開會的項目中有汲及到Retina設備的，不仿大膽的使用起image-set，就像qq.com這大佬同樣。

東一榔頭西一棒的說完了image-set，若是你不知道他是怎麼一回事，其實沒關係，你只要先知道這樣使用能幫你解決問題就OK，由於有太多的爲何咱們無能力如今解決，但隨着時間的累積，咱們終有一天能搞明白他的原理。最後但願這篇文章能幫到你們，若是你有更好的方法，記得與咱們一塊兒分享。

如需轉載，煩請註明出處：http://www.w3cplus.com/css/safari-6-and-chrome-21-add-image-set-to-support-retina-images.html