CSS background-image 图片大小

1. 引言

在网页设计中，经常会使用背景图片来为网页增加美观和吸引力。CSS的background-image属性允许我们在页面上设置背景图像，同时还可以调整图像的大小。本文将详细介绍如何使用CSS来控制背景图片的大小。

2. 使用 background-size 属性

要调整背景图片的大小，可以使用CSS的background-size属性。该属性允许我们指定背景图片的宽度和高度，以适应指定的元素。

selector {
   background-size: value;
}

其中，selector表示要设置背景图片大小的选择器，value表示背景图片的大小。

3. 值的类型

background-size属性支持多种值来调整背景图片的大小。下面是一些常用的值：

3.1 百分比值（Percentage）

可以使用百分比来设置背景图片的大小，相对于包含它的容器元素的宽度和高度。例如，如果希望背景图片的宽度为容器宽度的50%，高度为容器高度的80%，可以这样设置：

selector {
   background-size: 50% 80%;
}

3.2 固定值（Length）

可以使用固定的像素值来设置背景图片的大小。例如，如果希望背景图片的宽度为300像素，高度为200像素，可以这样设置：

selector {
   background-size: 300px 200px;
}

3.3 关键字（Keyword）

background-size属性还支持关键字值，包括以下几种：

auto：背景图片的大小将根据图片的实际尺寸自动调整。
cover：背景图片将被缩放并居中，以填充整个容器。即使图片被裁剪，也可以保持图片的宽高比。
contain：背景图片将被缩放以完全适应容器，无论是否需要保持图片的宽高比。在这种情况下，可能会出现容器的某些部分没有被填满的情况。

4. 示例

让我们通过一些示例来演示如何使用background-size属性来调整背景图片的大小。

4.1 百分比值示例

HTML代码：

<div class="container">
   <h1>使用百分比值调整背景图片</h1>
</div>

CSS代码：

.container {
   background-image: url("background.jpg");
   background-size: 80% 60%;
   background-repeat: no-repeat;
   height: 200px;
   width: 400px;
   padding: 20px;
}

4.2 固定值示例

HTML代码：

<div class="container">
   <h1>使用固定值调整背景图片</h1>
</div>

CSS代码：

.container {
   background-image: url("background.jpg");
   background-size: 300px 200px;
   background-repeat: no-repeat;
   height: 200px;
   width: 400px;
   padding: 20px;
}

4.3 关键字示例

HTML代码：

<div class="container">
   <h1>使用关键字调整背景图片</h1>
</div>

CSS代码：

.container {
   background-image: url("background.jpg");
   background-size: contain;
   background-repeat: no-repeat;
   height: 200px;
   width: 400px;
   padding: 20px;
}