黑马程序员技术交流社区

标题: 【成都校区】-- css背景尺寸详解 [打印本页]

---

作者: 小刀葛小伦    时间: 2019-11-21 18:37
标题: 【成都校区】-- css背景尺寸详解
在CSS3之前，我们不能指定背景图像的显示大小，一般是按图像的原始尺寸显示。在CSS3中，通过 background-size属性，可以设置背景图像的显示尺寸。

background-size属性的值可以是预定义关键字 cover | contain，也可以是使用长度值、百分比或 auto 定义背景图像的尺寸，长度和百分比不允许负值。

使用预定义值时，cover 表示背景图像完全覆盖容器的背景区域，如果图像过大或过小，则会将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器；contain 表示背景图像始终只填充容器的背景区域，如果图像过大或过小，也会对背景图像等比缩放。但是，当宽度与容器的宽度相等，或高度与容器的高度相等时，则停止缩放。所以，停止放大后，某个方向可能没有完全覆盖，则会显示背景颜色。

使用长度、百分比或 auto 定义尺寸时，需要提供两个参数。如果提供两个，第一个为背景图像的宽度，第二个为背景图像的高度；如果只提供一个，该值为背景图像的宽度，第 2 个值默认为 auto，即高度为 auto，背景图像按提供的宽度等比缩放。

这里对每个取值定义了一个类，然后分别应用到一个容器，来看看 background-size属性在不同取值下的表现。代码如下：

[HTML] 纯文本查看 复制代码

div {

width: 180px;

height: 120px;

border: 10px dashed #888;

background-repeat: no-repeat;

background-image: url(img/bg.gif);

}

.cover {

background-size: cover;

}

.contain {

background-size: contain;

}

.size {

background-size: 50% 50%;

}

<div class="cover"></div>

<div class="contain"></div>

<div class="size"></div>

上述代码的运行结果如图 4‑33 所示：

从上图可以看出，属性取值 cover 时，背景图像要进行等比放大，以填满整个容器，为了适应容器的宽度，高度已经溢出到了边框的下面；取值 contain 时，背景图像进行等比放大，宽度到达容器的高度后，图像不再进行放大，故容器宽度有空白；使用尺寸时，图像为原始尺寸的 50%。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2