CSS3 背景

CSS 背景

高级背景样式

CSS 提供了强大的属性来控制元素的背景，其功能远不止简单的颜色填充。您可以使用图像，控制图像的大小和位置，甚至可以叠加多个背景。

本章节涵盖的关键背景属性：

多背景图像
background-size：控制背景图像的尺寸。
background-origin：定义背景图像的起始定位区域。
background-clip：确定背景（颜色或图像）的绘制范围。

浏览器支持

这些高级背景属性在所有现代浏览器中都得到了很好的支持。

属性	Chrome	Edge	Firefox	Safari	Opera
多背景图像	Chrome 1+	Edge 12+	Firefox 3.6+	Safari 3.2+	Opera 10.5+
background-size	Chrome 4+	Edge 12+	Firefox 4+	Safari 4.1+	Opera 10.5+
background-origin	Chrome 1+	Edge 12+	Firefox 4+	Safari 3.2+	Opera 10.5+
background-clip	Chrome 1+	Edge 12+	Firefox 4+	Safari 3.2+	Opera 10.5+

注意：通常情况下，这些属性不再需要供应商前缀（-webkit-、-moz-、-o-）。

多背景图像

CSS 允许您使用 background-image 属性在单个元素上叠加多个背景图像。只需使用逗号分隔 url() 值即可。

图像是堆叠的，第一个指定的图像显示在最上层（最靠近观看者），第二个图像在其后面，以此类推。

您可以通过为相应的背景属性（如 background-position、background-repeat、background-size 等）提供逗号分隔的值，来分别控制每张图像的位置、重复方式、大小等。

示例：在重复图案背景上叠加一个小 logo：

.container {
  /* 叠加图像：logo 在最上层，图案在最下层 */
  background-image: url('logo.png'), url('pattern.gif');

  /* 分别控制每张图像 */
  background-position: center center, top left;
  background-repeat: no-repeat, repeat;
  background-size: 50px auto, auto; /* 设置 logo 大小，图案使用默认大小 */

  /* 确保容器有尺寸 */
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

您也可以使用 background 简写属性。每个图层依次定义，用逗号分隔：

.container-shorthand {
  background:
    /* 图层 1：Logo */
    url('logo.png') center center / 50px auto no-repeat,
    /* 图层 2：图案 */
    url('pattern.gif') top left / auto repeat;

  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

CSS `background-size` 属性

background-size 属性允许您指定背景图像的大小，从而覆盖其固有尺寸。

您可以使用：

长度值：（例如 px、em）。background-size: 100px 50px;（宽度高度）。如果只给一个值，第二个值默认为 auto。
百分比值： 相对于 背景定位区域（由 background-origin 定义）。background-size: 50% auto;。
auto： 按比例缩放图像，同时保持其纵横比。
cover： 按比例缩放图像（保持纵横比），使其尽可能大，完全覆盖背景区域。图像的某些部分可能会被裁剪。
contain： 按比例缩放图像（保持纵横比），使其尽可能大，同时确保整个图像 完全适应 背景区域内。背景区域的某些部分可能会留空。

使用像素调整图像大小的示例：

.resized-bg {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-size: 200px 150px; /* 固定大小 */

  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

使用 contain 和 cover 的示例：

.bg-contain {
  background-image: url('wide-image.jpg');
  background-repeat: no-repeat;
  background-size: contain; /* 将整个图像适应在区域内 */
  background-color: lightblue; /* 显示图像未覆盖的区域 */

  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.bg-cover {
  background-image: url('wide-image.jpg');
  background-repeat: no-repeat;
  background-size: cover; /* 覆盖整个区域，图像可能会被裁剪 */
  background-position: center center; /* 居中裁剪 */

  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}

使用多背景图像时，为 background-size 提供逗号分隔的值，使其与 background-image 中的每张图像对应。

全屏背景图像

background-size 的一个常见用例是创建覆盖整个浏览器视口 (viewport) 的背景图像。

要求：

覆盖整个页面。
按比例缩放图像。
图像居中。
避免图像本身导致出现滚动条。
滚动时图像保持固定（可选，使用 background-attachment: fixed）。

一种常见的技巧是样式化 html 或 body 元素：

html {
  /* 在 html 上设置背景以确保全高 */
  background: url('background.jpg') no-repeat center center fixed;

  /* 关键部分：缩放到覆盖 */
  background-size: cover;

  /* 确保 html 占据全高 */
  min-height: 100%;
}

body {
  /* 重置 body 的默认外边距 */
  margin: 0;
  /* 如果需要，确保 body 也能撑开高度 */
  min-height: 100%;
}

注意：在 html 和 body 上设置背景存在细微差异。在 html 上设置通常适用于固定背景。确保移除了 body 的外边距 (margin)。

CSS `background-origin` 属性

background-origin 属性决定了背景定位区域。它指定了 background-position 属性的原点 (0% 0%) 所在的位置。

padding-box（默认）：原点是内边距边缘的左上角。
border-box：原点是边框边缘的左上角。
content-box：原点是内容区域边缘的左上角。

这会影响使用 background-position 时背景图像从哪里开始绘制。

示例：相对于内容区域定位一个小背景图像：

.origin-content {
  border: 10px dashed gray;
  padding: 25px;
  width: 200px;
  height: 100px;

  background-image: url('icon.png');
  background-repeat: no-repeat;
  background-position: top left; /* 相对于原点定位 */

  /* 将原点设置为内容区域 */
  background-origin: content-box;

  background-color: lightyellow; /* 显示内边距/边框区域 */
}

CSS `background-clip` 属性

background-clip 属性决定了背景（颜色或图像）向外延伸的范围。

border-box（默认）：背景延伸到边框的外边缘。
padding-box：背景延伸到内边距的外边缘（止于边框）。
content-box：背景被裁剪到内容区域（只在内容区域内绘制）。

这对于创建边框看起来与背景分离，或视觉上约束背景范围的效果非常有用。

示例：将背景裁剪到内容区域，使内边距和边框区域透明（或显示下层背景）：

.clip-content {
  border: 10px dotted blue;
  padding: 25px;
  width: 200px;
  height: 100px;

  background-color: lightcoral;

  /* 将背景裁剪到内容区域 */
  background-clip: content-box;
}

实际应用：background-clip: padding-box; 常用于按钮或容器，当您希望边框看起来与内部填充背景区分开时。

高级背景属性总结

属性	描述
`background-image`	为一个元素指定一个或多个背景图像（用逗号分隔）。
`background-size`	指定背景图像的大小。关键字 `cover` 和 `contain` 特别有用。
`background-origin`	指定背景图像的定位区域（`padding-box`、`border-box`、`content-box`）。
`background-clip`	指定背景的绘制区域（`border-box`、`padding-box`、`content-box`）。
`background`（简写）	在一个声明中设置多个背景属性。用逗号分隔不同图层以实现多背景。