cssbackground-size样式（cssbackground属性简书）

CSS background-size样式

简介：

CSS background-size样式用于设置元素的背景图片的尺寸大小。通过该样式，可以调整背景图片的大小以适应元素的大小，并且可以控制背景图片的拉伸、裁剪、平铺等效果。

多级标题：

一、语法

二、值

三、示例

四、注意事项

一、语法

background-size样式的语法如下所示：

background-size: width height|auto|cover|contain;

其中，各个取值的含义如下：

- width：指定背景图片的宽度。可以使用像素(px)、百分比(%)等单位进行设定。

- height：指定背景图片的高度。同样可以使用像素(px)、百分比(%)等单位进行设定。

- auto：表示背景图片的宽高将保持原始比例。

- cover：表示将背景图片等比例缩放（可能裁切）以填满容器，背景图片完全覆盖容器，可能会有部分显示不全。

- contain：表示将背景图片等比例缩放以适应容器，背景图片完全显示，可能会有空白。

二、值

background-size样式的取值有多种，可以根据需求选择合适的值。

1. 固定尺寸

可以直接设定背景图片的宽度和高度为固定数值，例如：

background-size: 200px 150px;

2. 百分比

可以使用百分比来设置背景图片的尺寸，例如：

background-size: 50% 75%;

3. auto

当将background-size设定为auto时，背景图片的宽高将保持原始比例。

4. cover

background-size: cover;表示将背景图片等比例缩放（可能裁切）以填满容器，背景图片完全覆盖容器，可能会有部分显示不全。

5. contain

background-size: contain;表示将背景图片等比例缩放以适应容器，背景图片完全显示，可能会有空白。

三、示例

以下是一些使用background-size样式的示例：

1. 将背景图片的宽度设定为200px，高度设定为150px：

div {

background-image: url("image.png");

background-size: 200px 150px;

2. 将背景图片按照容器的宽度和高度的一半进行缩放：

div {

background-image: url("image.png");

background-size: 50% 50%;

3. 将背景图片等比例缩放以填满容器，可能会有部分图片被裁切：

div {

background-image: url("image.png");

background-size: cover;

四、注意事项

在使用background-size样式时，需要注意以下几点：

1. 如果只设置了宽度或者只设置了高度，背景图片将按照设定的宽高比例进行缩放。

2. 当使用百分比进行设定时，百分比是相对于容器的宽度和高度。

3. 如果背景图片的尺寸小于容器的尺寸，使用cover或contain时可能会产生拉伸效果。

总结：

通过CSS的background-size样式，我们可以灵活地控制背景图片的尺寸，使其适应不同的容器尺寸。无论是固定尺寸、百分比、自适应还是填满容器，都可以通过background-size样式来轻松实现。但是在使用时需要注意保持背景图片的比例，以及避免出现拉伸或裁剪等不良效果。