需求:一张全屏背景图适配不同手机屏幕,图片不变形不裁剪
方案:填充色+图片。其他方案不太行。其他方案参考微信社区:https://developers.weixin.qq.com/community/develop/doc/000eee514f8908ed7d5aef55e51400
- #EF1739是填充色,背景图片大小按照设计图写死,布局从上往下,区中。如果屏幕比图片宽或者长,则填充#EF1739。
- 别问,问就是这是最好最简单的解决方案了。里面的内容用绝对定位布局,这还顺便解决了在不同机型中内容和全屏背景图位置错位不适配问题。
- 嗯,又是和产品吵架的一天
css代码:
background: #EF1739 url('') center top no-repeat; background-size: 750rpx 1207rpx;