感谢您关注 Google I/O 大会！观看点播内容。

此页面由 Cloud Translation API 翻译。

背景

CSS 播客 - 053：背景

背景

每个 CSS 框背后都有一个称为背景层的专用层。CSS 提供了多种方法来对其进行有意义的更改，包括允许使用多种背景。

背景层离用户最远，从其 padding-box 区域开始渲染在框内容后面。这样，背景图层就不会与边框重叠。

背景颜色

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

可应用于背景图层的最简单的一种效果是设置颜色。background-color 的初始值为 transparent，这使得父项的内容可见。背景图层上设置的有效颜色位于相应元素上绘制的其他内容的后面。

背景图片

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

在 background-color 图层的顶部，您可以使用 background-image 属性添加背景图片。background-image 接受以下属性：

使用 url CSS 函数的图片网址或数据 URI。
由渐变 CSS 函数动态创建的图片。

使用 `url` CSS 函数设置背景图片

CSS 渐变背景

您可以使用多种渐变 CSS 函数，在传递两种或更多颜色后生成背景图片。

无论使用哪种渐变函数，生成的图片都会根据可用空间大小调整为与可用空间大小相匹配的大小。

演示使用渐变函数应用背景图片的示例：

重复背景图片

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

默认情况下，背景图片会水平和垂直重复，以填充背景层的整个空间。

如需更改此设置，请使用 background-repeat 属性以及下列值之一：

repeat：图片在可用空间内重复，并根据需要进行剪裁。
round：图片会水平和垂直重复，以便在可用空间中容纳尽可能多的实例。随着可用空间增加，图片会拉伸；在拉伸图片原始宽度的一半之后，系统会压缩图片以添加更多图片实例。
space：图片会水平和垂直重复，以便在可用的空间内容纳尽可能多的实例，而无需剪裁图片，即根据需要排除图片的实例。重复图片会接触背景层所占的边缘，空白区域会在这些图片之间均匀分布。

借助 background-repeat 属性，您可以单独设置 x 轴和 y 轴的行为。第一个参数用于设置水平重复行为，第二个参数用于设置垂直重复行为。

如果您使用一个值，它将同时应用于水平和垂直重复。

简写形式还提供方便的单字词选项，可让您的意图更加清晰。

值 repeat-x 仅水平重复图像；等同于 repeat no-repeat。

以下演示版演示了 background-repeat 属性的这些功能：

背景位置

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

您可能已经注意到，当网络上的某些图片使用 background-repeat: no-repeat 声明设置样式时，此类图片会显示在其容器的左上角。

背景图片的初始位置位于左上角。借助 background-position 属性，您可以通过偏移图片位置来更改此行为。

与 background-repeat 一样，借助 background-position 属性，您可以分别沿着 x 轴和 y 轴放置图片，并且默认使用两个值。

使用 CSS 长度和百分比时，第一个参数对应于横轴，第二个参数对应于纵轴。

如果只使用关键字，那么关键字的顺序无关紧要：

正确做法

background-position: left 50%;

正确做法

background-position: top left;

正确做法

background-position: left top;

对于与不同排名轴关联的关键字，顺序无关紧要。

错误做法

  background-position: 50% left;

当 CSS 值与关键字一起使用时，顺序很重要。第一个值代表横轴，第二个值代表纵轴。

错误做法

  background-position: left right;

您不能同时使用与同一轴相关联的关键字。

background-position 属性还有一个方便的单值简写形式；省略的值将解析为 50%。下例使用 background-position 属性接受的关键字对此进行了演示：

除了默认的双参数形式和一种参数形式外，background-position 属性最多也接受四个形参；

使用 3-4 个参数时，CSS 长度或百分比前面必须添加 top、left、right 或 bottom 关键字，这样浏览器才能计算偏移值应始于 CSS 框的哪条边缘。

使用三个参数时，CSS 长度或值可以是第二个或第三个参数，其他两个是关键字；它成功的关键字将用于确定与 CSS 长度或值相对应的边缘。指定的另一个关键字的偏移量设置为 0。

正确做法

background-position: bottom 88% right;

正确做法

background-position: right bottom 88%;

错误做法

background-position: 88% bottom right;

使用三个或更多参数时，CSS 长度值必须以 top、right、bottom 或 left 关键字开头。

正确做法

background-position: bottom 88% right 33%;

正确做法

background-position: right 33% bottom 88%;

错误做法

background-position: 88% 33% bottom left;

使用三个或更多参数时，CSS 长度值必须以 top、right、bottom 或 left 关键字开头。

如果对 CSS 背景图片应用了 background-position: top left 20%，该图片会放在框的顶部，20% 值表示从框左边（在 x 轴上）偏移 20%。

如果对 CSS 背景图片应用 background-position: top 20% left，值 20% 表示距 CSS 框顶部（y 轴）顶部偏移 20%，且图片位于 CSS 框左侧。

当使用四个参数时，这两个关键字将与两个值配对，该值对应于相对于每个指定关键字原点的偏移量。如果对背景图片应用 background-position: bottom 20% right 30%，则背景图片的位置距离底部 20%，距 CSS 框右侧 30%。

以下演示演示了此行为：

以下是混合使用 CSS 和关键字值来使用 background-position 属性的更多示例：

背景尺寸

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

background-size 属性用于设置背景图片的尺寸；默认情况下，背景图片的大小取决于其固有（实际）宽度、高度和宽高比。

background-size 属性使用 CSS 长度和百分比值或特定关键字。该属性最多接受两个参数，分别对应允许您单独更改背景的宽度和高度。

background-size 属性接受以下关键字：

auto：单独使用时，背景图片的大小基于其固有宽度和高度；当 auto 与宽度（第一个参数）或高度（第二个参数）的另一个 CSS 值一起使用时，系统会根据需要设置设为 auto 的尺寸，以保持图片的自然宽高比。这是 background-size 属性的默认行为。
cover：覆盖背景图层的整个区域。这可能意味着图片被拉伸或剪裁。
contain：调整图片大小，使其填充空间，而不进行拉伸或剪裁。因此，可能会存在空白区域，从而导致图片重复，除非将 background-repeat 设置为 no-repeat。

后两种参数旨在以独立方式使用，无需使用其他参数。

以下演示展示了这些关键字的实际效果：

演示如何将这些关键字应用于 background-size：

背景附件

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

借助 background-attachment 属性，您可以在层显示在屏幕上后修改背景图片（背景层的图片）的固定位置行为。

它接受 3 个关键字：scroll、fixed 和 local。

background-attachment 属性的默认行为是 scroll 的初始值。当需要更多空间时，图片会随背景层中的这一空间移动，该空间由 CSS 框的边界决定。

使用值 fixed 可将背景图片的位置固定到视口。

当背景层图片原来占据的空间需要滚动（或渲染）到屏幕之外时，背景层中的图片会保持在原始位置不变，而背景层使图片保持在原位置，直到整个图层被视口滚动到屏幕之外。

通过 local 关键字，可以相对于元素内容固定背景图片的位置。现在，随着空间在 CSS 框的边界内外进行渲染（通常是由于滚动、2D 或 3D 转换），背景图片会沿着它们所占据的空间移动。

背景来源

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

借助 background-origin 属性，您可以修改与特定框关联的背景区域。该属性接受的值对应于 box 的 border-box、padding-box 和 content-box 区域。

请通过以下演示试用这些选项：

背景片段

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

无论 background-origin 属性创建的边界为何，background-clip 属性均可控制从背景图层中直观看到的内容。

与 background-origin 类似，可以指定的区域为 border-box、padding-box 和 content-box，分别与可以渲染 CSS 背景层的位置相对应。使用这些关键字时，所呈现的背景超出指定区域时，都将被剪裁或裁剪。

background-clip 属性还接受 text 关键字，用于裁剪背景，使其不超出内容框中的文字。为了使这种效果在 CSS 框中的实际文字中很明显，文字必须是部分或完全透明的。

此属性是一个相对较新的属性，在撰写本文时，Chrome 和大多数浏览器都要求使用 -webkit- 前缀才能使用此属性。

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

。

注意：此属性不支持同时在 CSS 框中设置 background-clip: text。

多种背景

如本单元开头所述，背景层允许定义多个子图层。为简单起见，我将将这些子图层称为背景。

从上到下定义了多个背景；第一个背景离用户最近，最后一个背景离用户最远。

所定义的唯一背景或最后一层由浏览器指定为“最终背景层”。只有此图层才能分配background-color。

可以使用大多数与背景相关的 CSS 属性（以英文逗号分隔）单独配置多个图层，如下面的代码段和实时演示所示。

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

背景简写

为了更轻松地设置框的背景层的样式（尤其是在需要多个背景层时），我们提供了一种遵循以下特定模式的简写形式：

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

在声明多个背景的简写形式中，顺序非常重要。必须同时提供位置值和尺寸值，以正斜线 (/) 分隔。以正确的顺序声明原点和剪辑行为可让您充分利用同时对这两者有效的关键字

以下声明会裁剪背景，并从内容框生成背景：

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

记住这些简写语义后，可将代码段之前与背景相关的声明重写为以下内容：

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

检查您的理解情况

测试您对 CSS 背景知识的掌握情况

背景图片位于 CSS 框的左上角。

正确

正确！

错误

根据图片的固有大小，图片可能没有放置在 CSS 框的左上角，因此需要显式使用 background-position 来更改背景图片的默认位置。

默认情况下，背景图片不会重复。

错误

必须明确使用 background-repeat: no-repeat 以防止重复背景图片。此外，background-repeat: repeat-x 和 background-repeat: repeat-y 可用于防止在特定轴上重复。

正确

正确！

以下哪些 background-position 声明是有效的？

background-position: 50% left

将 CSS 值与关键字结合使用时，值的顺序很重要。

background-position: top right 33%

这会将背景图片定位在框的最顶部，距离框的右边缘 33%。

background-position: right bottom

这会将背景图片定位在框的最右侧和底部。可按任意顺序命名不同轴的位置。

background-position: left

这会将背景图片定位在框的最左侧，并垂直居中。如果只提供了轴的一个位置，则背景图片会位于相反轴的中心。

要将背景图片设置为在视口内固定，请使用以下代码：

background-position: fixed

“这是 background-position 属性的值无效。”

background-fixed-to-viewport: true

CSS 中尚不存在“background-fixed-to-viewport”。

background-attachment: fixed

background-attachment: fixed 会明确将背景图片设为在当前视口内固定。

background-attachment: scroll

“background-attachment”是用于将背景图片设置为在视口内固定的属性；不过，scroll 是该属性的默认值，该属性默认将背景图片固定到框内，不受框内内容的影响。”

CSS 框中的背景的默认 background-origin 为：

content-box

background-origin 的有效值，但不是默认值。

border-box

background-origin 的有效值，其预先安排的边框可绘制在背景上，但不是默认值。

padding-box

background-origin 的默认值。允许背景呈现在内容之外，一直呈现到框的边界。

margin-box

虽然是已识别的 CSS 框区域，但它是无效的 background-origin 属性值。

背景

CSS 播客 - 053：背景

背景

背景颜色

背景图片

使用 url CSS 函数设置背景图片

CSS 渐变背景

重复背景图片

背景位置

背景尺寸

背景附件

背景来源

背景片段

多种背景

背景简写

检查您的理解情况

使用 `url` CSS 函数设置背景图片