css sprite、background-size、Retina屏幕詳解

前面我寫過如何優化Retina屏幕下的圖像。

如何優化Retina屏幕下的圖像一文中從CSS3的background-size切入，介紹了background-size的屬性使用方法，而後轉入正題，介紹了Retina屏幕下的圖像優化。若是你對background-size屬性不太瞭解，建議你先了解一下。不論是上一篇仍是今天要介紹的這篇文章，background-size都是很是重要的一個屬性。或者說，Retina屏幕下對圖像的顯示處理，background-size起着很重要的做用。

大漠

在如何優化Retina屏幕下的圖像一文中，Josh Byers介紹了一個實例，在這個實例中，Josh Byers說：「你能夠經過CSS3 Media Queries爲Retina屏幕設備提供一個高分辨率的圖像」。

雖然這種方法經過多張圖像來顯示，增長了工做量，但我相信，爲最終用戶服務這是最好的選擇。由於只有給Retian屏幕設備用戶提供一個高質量的圖像。

爲了作到這一點，咱們須要一種新的技術支持，這種新的技術就是CSS3的background-size屬性。我沒有詳細介紹這個屬性的前因後果，只是經過一些練習簡單介紹了一下。

做爲獎勵，這篇文章我向你們介紹如何使用background-size讓高分辨率的圖片精靈（sprites）在Retina屏幕下完美顯示。

什麼是background-size屬性？

background-size屬性是CSS3新增長一個背景屬性，正如他的名稱同樣，你能夠經過這個屬性來控制背景圖片的尺寸大小。

background-size有幾個屬性值，能夠設置背景圖片的尺寸大小：

你可使用像素（px）值，第一個值設置背景圖像的寬度，第二個值設置背景圖像的高度，若是你只設置了一個值，那麼另個值默認爲「auto」值。

div { background: url(logo.png) no-repeat; background-size: 150px 150px; height: 200px; width: 400px; } 

你也可使用百分比值（%），當你使用百分比值時，background的尺寸是相對於容器的寬度計算。以下面的例子所示，咱們容器的寬度是「400px」，當咱們設置「background-size」的值爲「25%」時，背景圖像的寬度就變成了「100px」。

div { background: url(logo.png) no-repeat; background-size: 25% auto; height: 200px; width: 400px; } 

"cover"值，可讓背景圖像等比例放大到填滿整個容器。

div { background: url(logo.png) no-repeat; background-size: cover; height: 200px; width: 400px; } 

"contain"值可讓你的背景圖像縮放到最大寬度和高度，而且讓整個背景圖像保持在容器內。

div { background: url(logo.png) no-repeat; background-size: contain; height: 200px; width: 400px; } 

background-size取值爲「contain」理解起來有點歧義，他讓背景圖像能進行縮放，那是根據容器的大小進來進行縮放的，此時會有兩種情形，當背景圖像放到最大寬度時，背景圖像達到容器寬度，但未達到容器高度時，會以容器的寬度爲相對物，其高度不會在繼續放大；另外一種情形就是當背景圖像放大到最大寬度時，背景圖像的高度與容器高度相同時，那麼會以容器的高度爲相對物，其寬度不會在繼續放大。

有關於CSS3的background-size屬性的詳細使用，你們能夠點擊這裏。

大漠

Retina屏幕下使用background-size屬性

正如我所說的，蘋果推出Retina屏幕顯示技術，他們不但願讓普通顯屏下的相同物理尺寸在Retina屏幕下顯示更小。在iPhone4屏幕下顯示的icon尺寸要和3G S下的相同。

爲了完成這種效果，在Retina屏幕下圖像的尺寸都會翻倍。這樣一來，若是圖像的像素不翻倍，那麼圖像在Retina屏幕設備下就會變得模糊不清。

爲了抵消這個現像，咱們須要製做圖像的像素大小也翻倍，而後經過background-size屬性來控制他的大小，讓其在Retina屏幕顯示達到一致的效果。

例如我想建立一個LOGO，填充在一個「100px x 100px」的容器中，那麼我就須要製做並上傳一個至少翻兩倍的像素的圖像。

在咱們的實例中，LOGO的實際大小是「500px x 500px」。若是我將logo圖像作爲背景填充在一個容器中,而且沒使用「background-size」來設置背景圖像的尺寸大小，此時容器就會對背景圖像進行裁剪。

div { background: url(logo.png) no-repeat; height: 100px; width: 100px; } 

很顯然，咱們可使用「Media Queries」查詢設備的「pixel rotio」是否是「2」,把這張背景圖像只使用在Retina屏幕設備下。

咱們還將設置「background-size」的值爲「100px 100px」。實際上咱們在Retina屏幕設備下使用的圖像是「500px x 500px」這張，但上經過css讓他在瀏覽器顯示出來倒是「100px x 100px」。

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) { div { background: url(logo.png) no-repeat; background-size: 100px 100px; height: 100px; width: 100px; } } 

如今，若是你的圖形中有小於1px的線，你作縮小尺寸會有一些的問題。這個你須要視具體狀況試驗一下。

Sprites呢？

我是否是能夠建立一張Sprites圖，這張圖既有普通分辨率圖像，又有高分辨率下的圖像？

你能夠，但你仍是要面對，你的用戶在一個較慢的帶寬下下載一個大圖的煩惱。你也要同時面對IE9如下的瀏覽器不支持background-size的麻煩問題。

你最好仍是分別爲高分辨率和普通分辨率建立不一樣的兩張Sprites圖。這個時候又有不一樣的聲音了，這不是增長工做量嗎？但這真的不是,在個人工做流中，我會先建立一張高分辨率的Sprites圖像，而後制一份，並把尺寸縮放一半。當圖像須要更新時，只須要再一次處理高分辨率下的圖像，而後複製，重置一半的尺寸保存。

當個人Sprites圖像是300px,如何指定background-size爲32px呢？其實不難，只須要一點點數學計算,這是一個很初級的過程。

在咱們的實例中,咱們使用媒體社交圖標.我想讓他們都按16px x 16px的大小顯示。咱們將建立一個適合Retina屏幕設備的Sprites 圖像，將圖像尺寸翻倍(32px x 32px)，而且保存他。爲了保證普通顯屏設備的圖像顯示，在這個圖像的基礎上作了一半的縮小。

在最初的CSS樣式中，background-position的屬性值都不須要進行任何設置，由於他們的默認值都是「0」，以下所示：

#social-icons .facebook { background: url(images/social-sprite.png); background-position-x: 0px; background-position-y: 0px; height: 16px; width: 16px; } #social-icons .facebook:hover { background-position-y: -16px; } 

對於咱們的Retina屏幕顯示，咱們必須聲明一個Media Queries,該Media Queries專門針對Retina屏幕設備顯示器。咱們同時改變背景大小而不是寬度和高度。

所以，最關鍵的問題是，咱們怎麼知道background-size屬性值要設置爲多少？

這裏有一個公式

高分辨率圖像寬度 / 目標圖像寬度 = X

原始Sprites圖像寬度 / x = background-size的寬度值

實例說話

咱們高分辨率下的圖標是32px x 32px;

咱們目標圖像的寬度是「16px」；

咱們Sprites圖像的總寬度是「96px」

根據前面的公式 能夠得知

32/16 = 2

96/2 = 48

最後的一件事情。咱們只計算了背景圖像的寬度值，爲了確保背景圖像縮放比例正常，咱們將「height」值設置爲「auto」。固然你也能夠設置相的的值（設置background-sizer的寬度爲auto，高度爲具體值），但我發現設置寬度會比較容易。

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max-moz-device-pixel-ratio: 2) { #social-icons .facebook { background: url(images/social-sprite2x.png); background-position-x: 0px; background-position-y: 0px; background-size: 48px auto; } #social-icons .facebook:hover { background: url(images/social-sprite2x.png); background-position-x: 0px; background-position-y: -32px; } } 

固然，實現本文演示的效果有多種方法，他們各自有本身有優勢和缺點。我我的認爲，到目前爲止，使用Media Queries和高分辨率的Sprites是最好的選擇。

本文轉自：http://www.w3cplus.com/css/css-background-size-graphics.html