给div添加背景图片时查看图片样式-设置background-size属性

**给 div 添加背景图片时查看图片样式**

在网页设计中，使用背景图片是非常常见的技巧之一。通过设置 `background-image` 属性，可以将一张图片作为元素的背景。然而，在实际应用中，我们经常需要对背景图片进行调整，以适应不同的屏幕尺寸和分辨率。这就是 `background-size` 属性的作用。

**什么是 background-size 属性**

`background-size` 属性用于设置背景图片的大小，决定了背景图片在元素中的显示方式。它可以接受以下几种值：

* **长度值（如100px 或50%）**：直接指定背景图片的宽度和高度。
* **百分比值（如25% 或75%)**：相对于元素的宽度或高度设置背景图片的大小。
* **关键字值（如 cover 或 contain）**：根据背景图片的尺寸和元素的尺寸自动调整背景图片的大小。

在本文中，我们将重点讨论 `background-size` 属性的使用方法，包括长度值、百分比值和关键字值。

###1. 使用长度值当我们知道背景图片的确切宽度和高度时，可以直接使用长度值来设置 `background-size` 属性。例如：

cssdiv {
 background-image: url('image.jpg');
 background-size:100px200px;
}

在上述代码中，背景图片的宽度为100 像素，高度为200 像素。

###2. 使用百分比值如果我们不确定背景图片的确切尺寸，可以使用百分比值来设置 `background-size` 属性。例如：

cssdiv {
 background-image: url('image.jpg');
 background-size:50%75%;
}

在上述代码中，背景图片的宽度为元素宽度的50%，高度为元素高度的75%。

###3. 使用关键字值关键字值是 `background-size` 属性最有用的设置方式之一。它可以根据背景图片的尺寸和元素的尺寸自动调整背景图片的大小。常见的关键字值包括：

* **cover**：将背景图片拉伸到完全覆盖元素，可能会导致背景图片被裁剪。
* **contain**：将背景图片拉伸到完全包含在元素中，不会超过元素的尺寸。

例如：

cssdiv {
 background-image: url('image.jpg');
 background-size: cover;
}

在上述代码中，背景图片将被拉伸到完全覆盖元素。

###4. 使用 auto 值`auto` 值是 `background-size` 属性的默认值，它会根据背景图片的尺寸和元素的尺寸自动调整背景图片的大小。例如：

cssdiv {
 background-image: url('image.jpg');
 background-size: auto;
}

在上述代码中，背景图片将被自动调整到适合元素的尺寸。

###5. 使用 inherit 值`inherit` 值是 `background-size` 属性的一个特殊值，它会继承父元素的 `background-size` 属性。例如：

cssdiv {
 background-image: url('image.jpg');
 background-size: inherit;
}

在上述代码中，背景图片将继承父元素的 `background-size` 属性。

###6. 使用 initial 值`initial` 值是 `background-size` 属性的一个特殊值，它会重置属性到其初始值。例如：

cssdiv {
 background-image: url('image.jpg');
 background-size: initial;
}

在上述代码中，背景图片将被重置到其初始大小。

###7. 使用 unset 值`unset` 值是 `background-size` 属性的一个特殊值，它会移除属性的值。例如：

cssdiv {
 background-image: url('image.jpg');
 background-size: unset;
}

在上述代码中，背景图片将被移除。

通过以上这些例子，我们可以看到 `background-size` 属性有多种使用方法，可以根据不同的需求和场景进行调整。