background-size:100% 100% 和 background-size:cover的區別簡述



  

  下面我通過給下圖背景圖添加background-size屬性的不同屬性值,更直觀的顯示出100%cover的區別

   

 

  下圖是添加background-size:100% 100% 后的背景圖效果,背景圖被拉伸后有點失真

  

 

  下圖是添加background-size: cover 后的背景圖效果,背景圖被拉伸后背景圖不能全部顯示

  

 

 

  它們的區別:

    background-size:100% 100%把背景圖進行橫向和縱向的拉伸,圖片比例隨之改變,

    可能導致圖像失真(建議讓UI給原始背景圖,否則容易出現圖片拉伸后失真)

 

    background-size: cover把背景圖擴展至足夠大,直至完全覆蓋背景區域,

    圖片比例保持不變且不會失真,但某些部分被切割無法顯示完整背景圖像

 

  原文鏈接:https://blog.csdn.net/wzj2584454/article/details/78100233


免責聲明!

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



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