background-size

background-size

支持狀況：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+

在移動開發的時候，須要尺寸減半的須要。

特別是在引入雪碧圖的時候，之前的寫法老是直接寬，高直接減半，沒有出過問題

.BZ{
    background:url() no-repeated;
    background-size: width/2, height/2;
}

今天有人問我，background-size直接設爲50%不就好了，沒有細想，直接說行。

實際看效果的時候，出現了問題，原來不能這麼用。

本身慢慢研究，先總結下：

先對照本身的例子說明下，加強本身的記憶：

background-size via @CodePen

background-size: 參考是元素自己的寬高，並非參考引入圖片的寬高,也就是說它參考的是section的大小，不是圖片自身

直接縮減圖片的寬高

.bz{
  background-image: url();
  background-repeat: no-repeat;
  background-size: 320px,200px;
}

設置寬高一個屬性的時候，另外一個將會按照原來的比例進行變化(即設置一個屬性，另外一個等比例變化)

.bz{
    background-size: 320px,auto; // 高也會變半
    background-size: auto, 200px; // 寬也會變半
}

設置多個背景圖片

.secmul{
    width: 480px;
    height: 300px;
// set imgs urls
    background-image: url(../../static/imgs/m1.jpg), url(../../static/imgs/m2.jpg), url(10.large.jpg);
// set repeat pros
    background-repeat: no-repeat,no-repeat,no-repeat;
// 設置不一樣的位置，相對與最外層的畫布大小
    background-position: 0px 0px, right bottom, right top;
    background-color: #EEE;
// 分別設置 不一樣背景圖片的大小
    background-size: 200px 225px, 100px 100px, cover;
}

cover與contain 屬性詳解

background-size-prototype @CodePen

cover:背景圖像縮放,保留圖像原有的比例/長寬比,無論背景圖像大於仍是小於背景區域，都會覆蓋背景區域,圖像的寬度或高度等於或超過背景區域,再次,根據背景圖像的比例是否匹配的背景區域,背景圖像的某些部分可能不在背景區域內。

contain:背景圖像縮放,同時保留圖像原有的比例/長寬比,不管是圖像的寬度或高度超過背景區域,以儘量大的覆蓋背景區域。所以,根據背景圖像的比例是否匹配背景區域,可能會有一些背景圖像覆蓋不到背景地區。