只有一张背景图怎么适配各尺寸的屏幕


背景图居中铺满,保持宽高比,不用显示全部时:

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