只有一張背景圖怎么適配各尺寸的屏幕


背景圖居中鋪滿,保持寬高比,不用顯示全部時:

1 background-image: url("background.jpg");
2 background-repeat: no-repeat;
3 background-size: cover;
4 background-position: center;

 

背景圖鋪滿且不允許裁剪時:

background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;

 

保持寬高比,且不允許裁剪時(不能鋪滿容器):

background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: contain;
background-position: center;

 

如果需要更好的顯示效果就要用到@media來適配不同尺寸的屏幕和設備了


免責聲明!

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



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