背景

CSS 播客 - 053：背景

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

背景层离用户最远，渲染在框的内容之后，从其 padding-box 区域开始。这使得背景层根本不会与边框重叠。

背景颜色

浏览器支持

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

来源

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

背景图片

浏览器支持

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

来源

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

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

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

CSS 渐变背景

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

无论使用哪种渐变函数，生成的图片都会进行固有大小调整，以匹配可用空间量。

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

重复背景图片

浏览器支持

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

来源

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

使用具有以下值之一的 background-repeat 属性更改此设置

  • repeat：图片在可用空间内重复，并在必要时裁剪。
  • round：图片水平和垂直重复，以在可用空间中容纳尽可能多的实例。随着可用空间的增加，图片会拉伸，并在拉伸到图片原始宽度的一半后，会压缩以添加更多图片实例。
  • space：图片水平和垂直重复，以在可用空间中容纳尽可能多的实例，而无需裁剪 - 根据需要拉开图片实例的间距。重复的图片会触及背景层占据的空间边缘，空白空间在它们之间均匀分布。

background-repeat 属性允许您独立设置 x 轴和 y 轴的行为。第一个参数设置水平重复行为，第二个参数设置垂直重复行为。

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

简写形式还具有方便的单字选项，使您的意图更清晰。

值 repeat-x 仅水平重复图片；这等效于 repeat no-repeat。

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

背景位置

浏览器支持

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

来源

您可能已经注意到，当 Web 上的一些图片使用 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 框的顶部（在 y 轴上）偏移 20%，并且图片放置在框的左侧。

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

以下演示演示了此行为

以下是使用 background-position 属性的更多示例，其中使用了 CSS 值和关键字值的组合

背景大小

浏览器支持

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

来源

background-size 属性设置背景图片的大小；默认情况下，背景图片的大小基于其固有（实际）宽度、高度和纵横比进行调整。

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

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

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

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

以下演示演示了这些关键字的实际应用

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

背景附件

浏览器支持

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

来源

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

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

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

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

一旦背景层图片最初占用的空间需要滚动（或渲染）到屏幕外，背景层内的图片将保持在背景层使其能够处于的原始位置，直到整个层被视口滚动到屏幕外。

local 关键字使背景图片的位置能够相对于元素的内容固定。现在，背景图片会沿着它们占用的空间移动，因为该空间在 CSS 框的边界内部和外部渲染（通常是由于滚动、2D 或 3D 转换）。

背景原点

浏览器支持

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

来源

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

使用以下演示试用这些选项

背景剪裁

浏览器支持

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

来源

background-clip 属性控制从背景层视觉上看到的内容，而与 background-origin 属性创建的边界无关。

与 background-origin 类似，可以指定的区域是 border-box、padding-box 和 content-box，它们对应于可以渲染 CSS 背景层的区域。当使用这些关键字时，背景的任何渲染超出指定区域的部分都将被裁剪或剪切。

background-clip 属性还接受 text 关键字，该关键字将背景剪裁为不超过内容框内的文本。为了使此效果在 CSS 框内的实际文本中显而易见，文本必须是部分或完全透明的。

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

浏览器支持

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

来源

多个背景

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

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

浏览器将定义的唯一背景或最后一层指定为最终背景层。只有此层才允许分配 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
background-fixed-to-viewport 在 CSS 中尚不存在。
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 属性的无效值。