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


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';
只有這樣寫,上面帶/的代碼才不會被編譯成計算式。
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM