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

2019年06月05日Web前端

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

问题

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

.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