background 属性

background 属性使我们能够编辑元素的背景特性。由于这是一个简写属性，我们可以在一个代码块中编写多个属性。例如：

1body {
2  background:
3     fixed                    /* 附着方式 */
4     blue                    /* 颜色 */
5     content-box              /* 裁剪区域 */
6     url(background.jpg)      /* 图像 */
7     padding-box              /* 起始位置 */
8     top center 300px 300px   /* 位置与尺寸 */
9     no-repeat                /* 重复方式 */
10}

此示例包含了可以应用于背景的各种属性。请务必注意属性的顺序！

注意： 图像元素也有背景。如果原始图像不可用，建议设置一个 background-color 作为备用方案。

下面我们详细探讨每个背景属性。

背景属性一览

通过以下属性可以更改元素的背景：

• background-attachment
• background-color
• background-clip
• background-image
• background-origin
• background-position
• background-repeat
• background-size

background-attachment 属性

background-attachment 属性用于定义背景相对于视口的移动方式。我们可以使用 scroll、fixed 或 local 值。

默认值为 scroll，表示背景会随页面滚动而移动。

fixed 值将背景固定在视口上，因此滚动不会影响背景。

这常用于实现视差效果。

local 值是 CSS3 新增的。它使元素的背景固定在其自身上，解决了在滚动容器内使用背景时可能出现的意外行为。

background-color 属性

background-color 属性非常直接。它接受颜色值，以便自定义背景颜色。可以是颜色关键字、rgb 或 hsl 值：

background-clip 属性

我们可以使用 background-clip 属性创建一些有趣的视觉效果。它允许我们选择背景应用的区域。可用的值包括：

• border-box 是默认值，表示背景延伸到元素边框的外边缘。
• padding-box 将背景裁剪到元素内边距的边缘，不包含边框。
• content-box 将背景裁剪到内容区域的边缘，不包含内边距。
• inherit 继承父元素的 background-clip 值。

background-image 属性

background-image 属性用于将图形图像应用到元素的背景。

我们通过 URL 指定图像的位置，如下所示：

1div {
2  background-image: url(image.png);
3}

如果图像位于外部路径，可以使用相对路径或完整的网页地址。

background-origin 属性

background-origin 属性用于选择背景的起始位置。它与 background-clip 类似，但不是裁剪背景，而是决定背景定位的起始区域。

使用 padding-box 值时，背景会应用在整个元素上，包括内边距。使用 border-box 值时，背景会覆盖整个元素（包括边框）。使用 content-box 值时，背景仅应用于内容区域，不包含内边距。

结合 background-size: cover 和 background-repeat: no-repeat 使用该属性，可防止背景图像在边框或内边距下重复显示。这一点将在后续详细讨论。

background-position 属性

使用 background-position 属性可以将背景图像定位到容器中的指定位置。

水平方向使用 left、right、center 关键字，垂直方向使用 top 或 bottom，如下所示：

1div {
2  background-position: top right;
3} 

默认值为 0, 0，表示背景图像位于元素的左上角。

若需更精确地控制位置，可以使用长度值：

1div {
2  background-position: 100px 50px; 
3}

第一个值 100px 是水平位置，第二个值 50px 是垂直位置。这意味着图像向右移动 100px，向下移动 50px。这些值可以使用 px、rem、em 或任何有效的 CSS 长度单位。

也可以使用百分比，如下所示：

1div {
2  background-position: 100% 50%; 
3}

按百分比移动背景图像意味着图像的 X% 点将与容器的 X% 点对齐。例如，50% 会使图像中间与容器中间对齐，100% 会使图像的最后一个像素与容器的最后一个像素对齐。

background-repeat 属性

当使用小于背景区域的图像时，可以通过 background-repeat 属性设置其重复行为，如下所示：

1html {
2  background-image: url(logo.png);
3  background-repeat: repeat-x; 
4}

该属性可使用的值如下：

• repeat：在两个方向上重复图像（默认值）。
• repeat-x：仅水平方向重复图像。
• repeat-y：仅垂直方向重复图像。
• no-repeat：不重复图像，仅显示一次。
• space：在两个方向上重复图像，并均匀分布间距。
• round：在两个方向上重复图像，并拉伸以填满可用空间。

下图展示了各属性之间的差异：

Screenshot 2022-05-11 at 4.21.01 PM.png

我们还可以用一行代码为不同轴设置不同的值：

1.div {
2   background-repeat: repeat space;
3}

第一个值对应水平轴，第二个值对应垂直轴。

background-size 属性

最后一个背景属性是 background-size，可能是最实用的一个。我们可以使用三个关键词：auto、cover 和 contain，其中 auto 是默认值。

• auto：由浏览器根据图像的实际尺寸自动计算背景大小，保持宽高比不变。
• cover：缩放图像以完全覆盖整个元素。如果图像超出边界，会在某一侧被裁剪以适配。
• contain：在任一轴（x 或 y）与图像最小边缘重叠时停止缩放，确保图像完全包含在元素内。这意味着图像始终完整显示，可能会在两侧或底部留有空白。

此外，我们还可以指定长度值，用于设置背景图像的宽度（高度自动计算）：

1div {
2  background: url(image.jpg);
3  background-size: 100%;
4}

如果指定多个值，请注意第一个是宽度，第二个是高度：

1div {
2  background: url(image.jpg);
3  background-size: 400px 100px;
4}

注意： 可使用任何 CSS 尺寸单位，包括 px、百分比、em、vh、vw 等。

使用多张背景图像

我们也可以通过在图像路径之间添加逗号来处理多张背景图像，如下所示：

1html {
2  background: url(firstimage.jpg), url(secondimage.jpg);
3  background-size: 500px 100px, cover;
4}

在此示例中，第一张图像被设置为 500px × 100px，位于第二张图像之上，而第二张图像则覆盖整个区域。