CSS3 background-size属性详解

前言

最近做了这样一个需求，需要在一张背景图的底部添加文案提示语，背景图需要被内容撑开，同时背景图不能变形，这个时候 background-size 属性就派上用场了。当然，设计稿图片底部的留白区域是足够大的。

解决方案

<div class="bg">
    <div class="content">
        <p>2222222</p>
        <p>2222222</p>
    </div>
</div>

方案1：cover

.bg {
    background-image: url('../img/footer.png');
    background-size: cover;
    display: flex;
    align-items: flex-end;
}
.content {
    width: 100%;
    margin: 115px 0 10px;
}
p {
    text-align: center;
}

方案2：length

.bg {
    background-image: url('../img/footer.png');
    /**按照图像原比例设置尺寸**/
    background-size: 375px 225px;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}
.content {
    width: 100%;
    margin: 115px 0 10px;
}
p {
    text-align: center;
}

方案3：percentage

.bg {
    background-image: url('../img/footer.png');
    background-size: 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
}
.content {
    width: 100%;
    margin: 115px 0 10px;
}
p {
    text-align: center;
}

我们再来看看实际效果

image.png

这样就实现了背景图区域的高度被内容区域撑开，同时背景图不变形。

属性定义

回到正题。background-size 设置背景图片大小，图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

属性值

length

设置背景图片的固定宽高。

percentage

• background-size: 100% 100%，保证背景图像能显示全，但是可能会压扁。
• background-size: 100%，背景图不会变形，有部分区域可能会被截掉。

cover

缩放背景图以完成覆盖背景区，背景图可能部分区域看不见。cover 尽可能大的缩放背景图像并保持图像的宽高比例。

contain

把图像扩展至最大尺寸，以使其宽度和高度完成适应内区域。