background-size属性详解-蒲公英云

background-size属性详解

小咪咪 2021-07-04 14:07 379阅读 0赞

css background-size 属性详解，background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin（图片的起始位置）的位置决定，还可以通过 cover 和 contain 来对图片进行伸缩。

`background-size` 属性

1、定义：

background-size 用来调整背景图像的尺寸大小。

2、语法：

以下为引用内容：

background-size : contain | cover | 100px 100px | 50% 100%;

3、参数：

background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；
background-size ：100px 100px; // 调整图片到指定大小；
background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。

CSS 背景尺寸 `background-size`属性

在CSS3之前，我们不能指定背景图像的显示大小，一般是按图像的原始尺寸显示。在CSS3中，通过 background-size属性，可以设置背景图像的显示尺寸。

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

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

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

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

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>