1、背景圖片或圖標也可像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來左上角定位
2、另一種寫法:
.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';
只有這樣寫,上面帶/的代碼才不會被編譯成計算式。