背景圖片等比縮放的寫法background-size簡寫法

一、背景圖片或圖標也可像img同樣給其寬高就能指定其縮放大小了。

好比一個實際寬高36*28的圖標，要縮小一半引用進來的寫法就是：

background:rgba(0, 0, 0, 0) url("../images/report_icon@2x.png") no-repeat scroll left center / 18px 14px;
      //left center是圖標定位，/後面的18px 14px是指定背景圖標應用的大小，原圖標大小是36px 28px 這樣指定大小爲18*14的寫法就能夠起到相似img中的等比縮放效果

注意：單個圖片能夠用left center來左上角定位

 

二、另外一種寫法：

.tag-icon {

    background: rgba(0, 0, 0, 0) url("../images/website_icon@2x.png") no-repeat scroll 0 -70px / 44px 95px;

    display: inline-block;

    height: 9px;

    width: 9px;

}

注意：這裏引用的是精靈圖標集，該sprite圖片原始大小是88*190,全部後面的數字是縮放精靈圖片爲原來一半的意思即44*95,前面的0 -70px是什麼意思呢，其實就是在原精靈圖片上要定位0 140px的地方，縮放後只要定位到0 -70px便可定位到精靈圖標了。後面是圖片的整個縮放大小，前面是縮放後的定位點。後面其實就是css3的background-size屬性的簡寫，還可寫成百分比形式，即一個50%便可

 

最後注意：還有一個坑就是less中遇到+,-,*,/符合它會計算，如上面代碼中的70px/40px，它會計算出1.59使得background屬性值無效(ff會報這個錯)

因此遇到上面的代碼寫在less中的話要作到避免編譯，寫法是：~'.....';

background: ~'rgba(0, 0, 0, 0) url("../images/website_icon@2x.png") no-repeat scroll 0 -70px / 44px 95px';

只有這樣寫，上面帶/的代碼纔不會被編譯成計算式。