html背景图片不完全填充,background-size为100% 100%时背景图填充不完整

老项目中使用了绝对定位的背景图，拼接显示一张大图，由于绝对定位时使用了百分比，在全屏显示时，两图之间出现了条空白的先。

问题

原以为是百分比计算有问题，实际发现，并不是计算的问题，只是图形的宽高都是有小数的。

简化实际项目，如下：

.outer {

position: relative;

width: 100px;

height: 200px;

}

.head {

position: absolute;

width: 100px;

height: 99.5px;

top: 0;

background-image: url('./111.png');

background-repeat: no-repeat;

background-size: 100% 100%;

}

.body {

position: absolute;

width: 100px;

height: 100.5px;

top: 99.5px;

background-image: url('./111.png');

background-repeat: no-repeat;

background-size: 100% 100%;

}

实际浏览器中的效果：

很明显，两个div之间有间隙，照成了以为是定位偏差的错觉。

解决方法

高度整数

实践发现，当高度是整数的时候，设置100% 100%时不会出现间隙的问题。但是非固定高度布局的时候还是会有这个问题。

repeat

y轴方向上设置背景图repeat也能解决这个问题。

background-size其他值

100%

当设置background-size为100%时，间隙也是不会出现的，那他与100% 100%又有啥区别呢？

background-size有两个值，分别表示x轴方向和y轴方向，当我们设置为100%时，y轴的默认时auto。而100% 100%会拉伸图片，使得图片变形并完全覆盖(小数值不会)，100% auto则是表示x轴百分百占用，y轴方向保持原先图片的宽高比，即以比例拉伸。

cover

cover同样也能完成任务，他的意思是将背景图按比例放大，使得能够完全覆盖背景区域，所以他的背景图是被截断的(纯色无所谓)。

拓展

其他属性

既然都讲到了background-size了，把他剩余的几个属性值也看一遍把。

contain

他表示将背景图放大，直到x或y轴一边达到最大，简单来说，就是100% auto或auto 100%，当背景元素与背景图比例不一致时就会出现空白。

px

同样支持数值，即背景图的大小。