CSS 使用 background 属性设置图片尺寸

1. 前言

在网页设计和开发中，背景图片是一个常见的元素。为了使背景图片适应不同的屏幕尺寸和设备类型，我们需要学会如何设置背景图片的尺寸。本文将详细介绍如何使用 CSS 的 background 属性来设置背景图片尺寸，并给出一些示例代码来演示不同的情况。

2. `background-size` 属性

CSS 的 background-size 属性用于设置背景图片的尺寸。它可以接受多个值，用空格分隔。常用的取值有：

auto：默认值，保持图片的原始大小。
contain：使图片完全包含在容器内，可能会留有空白区域。
cover：使图片填充整个容器，可能会被裁剪。
<length>：用具体的长度值来指定图片的尺寸。
<percentage>：用百分比值来指定图片的尺寸。

下面是一个示例代码，展示了如何使用 background-size 属性来设置背景图片的尺寸为 200 像素宽和 300 像素高：

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

3. `background-repeat` 属性

CSS 的 background-repeat 属性用于设置背景图片的重复方式。它可以接受多个值，用逗号分隔。常用的取值有：

repeat：默认值，背景图片在水平和垂直方向上平铺。
repeat-x：背景图片只在水平方向上平铺。
repeat-y：背景图片只在垂直方向上平铺。
no-repeat：背景图片不平铺，只显示一次。

下面是一个示例代码，展示了如何使用 background-repeat 属性来设置背景图片只在水平方向上平铺：

div {
  background-repeat: repeat-x;
}

4. `background-position` 属性

CSS 的 background-position 属性用于设置背景图片的起始位置。它可以接受多个值，用空格分隔。常用的取值有：

<position>：用具体的位置值来指定背景图片的起始位置。
<percentage>：用百分比值来指定背景图片的起始位置。
top：背景图片在容器顶部居中。
right：背景图片在容器右侧居中。
bottom：背景图片在容器底部居中。
left：背景图片在容器左侧居中。
center：背景图片在容器水平和垂直方向上居中。

下面是一个示例代码，展示了如何使用 background-position 属性来设置背景图片在容器右上角居中：

div {
  background-position: right top;
}

5. `background-origin` 属性

CSS 的 background-origin 属性用于设置背景图片的起始位置相对于容器的位置。它可以接受多个值，用空格分隔。常用的取值有：

padding-box：背景图片的起始位置相对于容器的内边距（padding）。
border-box：背景图片的起始位置相对于容器的边框（border）。
content-box：背景图片的起始位置相对于容器的内容区域。

下面是一个示例代码，展示了如何使用 background-origin 属性来设置背景图片的起始位置相对于容器的边框：

div {
  background-origin: border-box;
}

6. `background-attachment` 属性

CSS 的 background-attachment 属性用于设置背景图片是否固定（不随滚动而移动）。它可以接受多个值，用逗号分隔。常用的取值有：

scroll：默认值，背景图片会随滚动而移动。
fixed：背景图片固定在容器中，不随滚动而移动。
local：背景图片固定在容器的内容区域中，不随滚动而移动。

下面是一个示例代码，展示了如何使用 background-attachment 属性来设置背景图片固定在容器中：

div {
  background-attachment: fixed;
}

7. 示例代码

下面是一个综合运用以上属性的示例代码，展示了如何设置一张背景图片的尺寸、重复方式、起始位置、起始位置相对于容器的位置以及是否固定在容器中：

div {
  background-image: url('example.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-origin: padding-box;
  background-attachment: fixed;
}

在这个示例中，背景图片的尺寸被设置为尽可能地填充容器，并且会被裁剪。图片的起始位置居中，相对于容器的内边距进行定位。同时，图片固定在容器中，不会随滚动而移动。

8. 总结

本文详细介绍了如何使用 CSS 的 background 属性来设置背景图片尺寸。我们学习了 background-size、background-repeat、background-position、background-origin 和 background-attachment 这些属性的用法，并通过示例代码演示了不同的情况。掌握了这些知识后，你将能够灵活地设置背景图片的尺寸，使其适应各种屏幕尺寸和设备类型。