解剖css3的background-size屬性

在咱們作項目過程當中，可能會遇到一個問題，就是給個背景圖的尺寸大小是同樣的，但是屏幕大小卻有不少種。

好比app前面的幾個引導頁，你收到的是固定大小尺寸的照片，怎麼讓這個屏幕能夠跟背景圖片相適應呢？

有一些解決方案是，根據不一樣的屏幕大小作不一樣的照片尺寸，但是這樣添加了設計師的工做量，又要加載不少圖片，性能變差了不說，還加多了工做量。

有人說那把圖片壓縮啊，或者用css sprite 拼合成一張圖片而後根據background-position設置背景的位置。

但是這些對我來講：「hao gui ma fan」哦

這時我就想到以前用過css3的一個新屬性，就是可使圖片佈滿整個屏幕，就是「background-size」:"cover";

而後我就用了，但是個人圖片，在不一樣屏幕顯示不一樣的尺寸，我要顯示的內容跑到屏幕外了，以後我就查了background-size的具體用法

在google的時候,看到了一篇background-size說的挺好的一篇文章，http://www.w3cplus.com/content/css3-background-size

  background-size: auto || <length> || <percentage> || cover || contain

而後出現了下面的取值說明：

一、auto:此值爲默認值，保持背景圖片的原始高度和寬度；

二、<length>此值設置具體的值，能夠改變背景圖片的大小；

三、<percentage>此值爲百分值，能夠是0％〜100％之間任何值，但此值只能應用在塊元素上，所設置百分值將使用背景圖片大小根據所在元素的寬度的百分比來計算。

四、cover：此值是將圖片放大，以適合鋪滿整個容器，這個主要運用在，當圖片小於容器時，又沒法使用background-repeat來實現時，咱們就能夠採用cover;將背景圖片放大到適合容器的大小，但這種方法會使用背景圖片失真；

五、contain:此值恰好與cover相反，其主要是將背景圖片縮小，以適合鋪滿整個容器，這個主要運用在，當背景圖片大於元素容器時，而又須要將背景圖片所有顯示出來，此時咱們就可使用contain將圖片縮小到適合容器大小爲止，這種方法一樣會使用圖片失真。

當background-size取值爲<length>和<percentage>時能夠設置兩個值，也能夠設置一個值，當只取一個值時，第二個值至關於auto，但這裏的auto並不會使背景圖片的高度保持本身原始高度，而會與第一個值相同。

看完以後，我就把每一個值都試了一遍，但是不對哦，每一個屬性都不是我要的。

後來認真解析一遍，發現其實每一個屬性都有本身的結果，具體解釋看上面。這時不如直接獲取屏幕的寬度和高度，（由於我寫的頁面是用js寫的）

這時果斷用了var wid_height=$(window).height();來獲取屏幕的高，

而後呢，在傳入頁面時，在寫app頁面時，就已經將width設置爲「：@app width 1」,就是屏幕的寬度，至於爲何這麼寫，這是框架封裝出來的， 就不要想那麼多了。

而後在設置的時候就以「background-size」:"100%"+win_height;來傳入。（這裏用的方法就是「background-size」:"<percentage> <percentage>"）

測試一下，大功告成。很開心，用最簡單的方法將問題解決了，界面又好看。

總結一下，首先就是有一點基礎，因此知道用什麼，以後呢，google是一個好幫手，可是google來的東西畢竟是其餘人的，你要善於理解其本質並加以運用，最後還要結合你當前所處的環境，才能最終解決你所遇到的問題。

好了，不囉嗦那麼多，旁邊的程序猿又說我在裝逼了，其實我只是想把本身用最好的、簡單的方法將複雜的問題解決，這個思想傳遞下去。