今天在小程序中使用图片作为 view 背景时,发现背景图显示不完整,使用的是 css
background-size: cover;
可是之前这样用时,从来没遇到这种情况。仔细对比了一下,发现:
- 显示正常的情况是,view 区域很大,背景图没有完整显示的要求
- 显示不正常的是,view 区域很小,而背景图相对大一些,这种情况背景图没有显示完整
改用
background-size:100% 100%;
之后,就显示正常了。
所以,整理了一下这两者的区别。
100% 使用场景
当背景图必须完整显示全时,使用
background-size:100% 100%;
但是会变形。
cover 使用场景
当背景图不是很重要时,只需要把 div 区域填充满
background-size: cover;
不会变形,但是可能部分区域不可见。
Basically it zooms in until the inner most edges are touching the side, which means that some of the image may be cut off.
微信关注我哦 👍
我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式