css background-size 100% 与 cover 的区别

发布时间: 2020-08-19 19:53:53 作者: 大象笔记

今天在小程序中使用图片作为 view 背景时,发现背景图显示不完整,使用的是 css

background-size: cover;

可是之前这样用时,从来没遇到这种情况。仔细对比了一下,发现:

改用

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.

我是一名山东烟台的开发者,联系作者