background-size:

background-size是CSS的一个属性，用于设置背景图片的尺寸大小。通过该属性，可以控制背景图片的大小，使其适应不同的容器大小。

该属性可以用于任何元素，包括div、文本框、按钮等。下面将详细介绍background-size的用法，并进行深入解析。

background-size的语法为：

background-size: value;

其中value可以接受以下几种值：

1. auto：表示自动调整背景图片尺寸以适应容器大小。如果背景图片本身的尺寸小于容器大小，则会被拉伸以填满整个容器；如果背景图片尺寸大于容器大小，则会被缩小以适应容器。

2. length：接受一个具体的数值作为参数，表示设置背景图片的宽度和高度。例如，background-size: 100px 200px;表示将背景图片的宽度设置为100像素，高度设置为200像素。

3. percentage：接受一个百分比值作为参数，表示以容器大小的百分比来设置背景图片的尺寸。例如，background-size: 50% 75%

表示将背景图片的宽度设置为容器宽度的50%，高度设置为容器高度的75%。

4. cover：表示保持背景图片的纵横比例不变，通过调整图片的尺寸，使其完全覆盖容器。这意味着背景图片可能被裁剪掉部分内容，以适应容器大小。

5. contain：表示保持背景图片的纵横比例不变，通过调整图片的尺寸，使其完全包含在容器内。这意味着背景图片可能只填充容器的一部分区域，留有空白背景。

下面我们来看几个实例，以更好地理解background-size的作用：

1. 实例1：background-size: auto;

```css

div {

background-image: url('example.jpg');

background-size: auto;

}

```

在这个例子中，背景图片会自动调整大小以适应容器。如果容器宽度为200px，而背景图片的宽度为300px，则背景图片将被缩小为200px以适应容器宽度。

2. 实例2：background-size: 100px 200px;

```css

div {

background-image: url('example.jpg');

background-size: 100px 200px;

}

```

在这个例子中，背景图片的宽度将被设置为100px，高度将被设置为200px。如果容器宽度大于100px，高度大于200px，则背景图片将居中显示在容器内部，多余的部分将被裁剪掉。

3. 实例3：background-size: 50% 75%;

```css

div {

background-image: url('example.jpg');

background-size: 50% 75%;

}

```

在这个例子中，背景图片的宽度将被设置为容器宽度的50%，高度将被设置为容器高度的75%。这样，背景图片将被缩放以适应容器的相应百分比尺寸。

4. 实例4：background-size: cover;

```css

div {

background-image: url('example.jpg');

background-size: cover;

}

```

在这个例子中，背景图片将被拉伸或缩小以完全覆盖容器。如果背景图片的纵横比例与容器的纵横比例不同，则背景图片可能会被裁剪掉一部分内容。

5. 实例5：background-size: contain;

```css

div {

background-image: url('example.jpg');

background-size: contain;

}

```

在这个例子中，背景图片将被调整大小以完全包含在容器内。如果容器的大小与背景图片的大小不同，背景图片可能只填充容器的一部分区域，留有一些空白背景。

综上所述，background-size是一个非常有用的CSS属性，可以帮助控制背景图片的尺寸大小，以适应不同的容器大小。通过灵活运用background-size属性，我们可以实现各种各样的背景效果，使页面更加丰富多样。