background-size为100%-100%时背景图填充不完整

2019年06月05日Web前端0

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

问题

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

.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 class="outer">
    <div class="head"></div>
    <div class="body"></div>
</div>

实际浏览器中的效果：

很明显，两个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

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

详细代码见：github。

CSSCSS3

目录