背景

CSS 播客 - 第 053 集：背景

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

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

背景颜色

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

您可以对背景图层应用的最简单的效果之一就是设置颜色。background-color 的初始值为 transparent，这会允许父项的内容可见。在背景层上设置的有效颜色位于在该元素上绘制的其他内容后面。

背景图片

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

您可以在 background-color 层上使用 background-image 属性添加背景图片。background-image 接受以下内容：

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

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

CSS 渐变背景

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

无论使用哪个渐变函数，生成的图片都会采用内在尺寸，以匹配可用空间量。

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

重复的背景图片

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

如需更改此设置，请使用 background-repeat 属性并将其设置为以下某个值：

  • repeat：图片会在可用空间内重复，并根据需要进行剪裁。
  • round：图片会水平和垂直重复，以便在可用空间中放置尽可能多的实例。随着可用空间的增加，图片会拉伸，在拉伸到图片原始宽度的 1/2 后，会压缩以添加更多图片实例。
  • space：图片会水平和垂直重复，以便在可用空间内放置尽可能多的实例，而无需剪裁，并根据需要为图片实例留出间距。重复的图片与背景层所占空间的边缘相接，并且它们之间均匀分布空白。

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

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

该简写法还提供了方便的一字选项，可让您的意图更清晰。

值 repeat-x 仅水平重复图像；这相当于 repeat no-repeat。

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

背景位置

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

您可能已经注意到，当网络上的某些图片使用 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 属性还最多接受四个参数；

使用三个或四个参数时，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 关键字之前。

如果将 background-position: top left 20% 应用于 CSS 背景图片，图片会放置在框顶部，20% 值表示相对于框左侧（在 x 轴上）的 20% 偏移量。

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

使用四个参数时，两个关键字与两个值配对，这两个值与指定的每个关键字的来源相对应。如果将 background-position: bottom 20% right 30% 应用于 background-image，则 background-image 将位于 CSS 框的底部 20% 和右侧 30% 的位置。

以下演示演示了此行为：

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

背景大小

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

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

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

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

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

后两个参数应单独使用，不应与其他参数搭配使用。

以下演示演示了这些关键字的实际运作方式：

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

背景附件

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

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

background-attachment 属性的默认行为是 scroll 的初始值。当需要更多空间时，图片会随 CSS 盒子的边界在背景层内移动。

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

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

借助 local 关键字，您可以将背景图片的位置相对于元素内容固定。背景图片现在会沿着它们占据的空间移动，因为该空间会在 CSS 盒子的边界内外呈现（通常是由于滚动、2D 或 3D 转换）。

背景来源

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

Source

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

您可以使用以下演示版试用这些选项：

背景剪辑

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

无论 background-origin 属性创建了什么边界，background-clip 属性都会控制从背景层可视地看到的内容。

与 background-origin 一样，可指定的区域包括 border-box、padding-box 和 content-box，分别对应于可呈现 CSS 背景层的位置。使用这些关键字时，背景的任何渲染内容如果超出指定区域，都会被剪裁或截断。

background-clip 属性还接受 text 关键字，该关键字会剪裁背景，使其不超出内容框中的文本。为了让 CSS 框中的实际文本显示出此效果，文本必须部分或完全透明。

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

多个背景

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

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

浏览器会将唯一定义的背景或最后一层指定为最终背景层。只有此层可以分配 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 属性而言，它是一个无效值。