CSS 播客 - 053：背景
背景
每个 CSS 框的背后都有一个称为背景层的专用层。CSS 提供了多种方式对其进行有意义的更改，包括允许多种背景。
背景图层距离用户最远，呈现在从其 padding-box 区域开始的方框内容后面。这样可以使背景图层完全不与边框重叠。
背景颜色
可以应用到背景图层的最简单的一种效果就是设置颜色。background-color 的初始值为 transparent，允许父级的内容可见。在背景层上设置的有效颜色位于该元素上绘制的其他元素后面。
背景图片
在 background-color 图层的顶部，您可以使用 background-image 属性添加背景图片。background-image 接受以下各项：
- 使用
urlCSS 函数时的图片网址或数据 URI。 - 由渐变 CSS 函数动态创建的图片。
使用 url CSS 函数设置背景图片
CSS 渐变背景
您可以使用多种渐变 CSS 函数生成在传递两种或更多颜色时的背景图片。
无论使用哪种渐变函数，生成的图片本身的大小都会与可用空间大小相匹配。
展示利用渐变函数应用背景图片的示例：
重复的背景图片
默认情况下，背景图片会水平和垂直重复以填充背景图层的整个空间。
如需更改此行为，请使用具有以下某个值的 background-repeat 属性：
repeat：图片会在可用空间内重复，并根据需要进行剪裁。round：图片会水平和垂直重复，以便在可用空间中容纳尽可能多的实例。随着可用空间增加，图片会拉伸，并且在拉伸图片的原始宽度的一半后，系统会进行压缩，以添加更多图片实例。space：图片会水平和垂直重复，以便在不剪裁的情况下适应尽可能多的实例，从而根据需要留出图片实例空间。重复图片会触及背景层所占空间的边缘，并在这些图片之间均匀分布空白。
借助 background-repeat 属性，您可以单独设置 x 轴和 y 轴的行为。第一个参数设置水平重复行为，第二个参数设置垂直重复行为。
如果您使用单个值，该值将同时应用于水平和垂直重复。
该简写形式还提供方便的单字词选项，可让您的意图更加明确。
值 repeat-x 仅水平重复图片；效果等同于 repeat no-repeat。
以下演示演示了 background-repeat 属性的这些功能：
背景位置
您可能已经注意到，当网站上的某些图片使用 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 属性也有一个方便的 1 值简写形式；省略的值会解析为 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 关键字开头。
如果将 background-position: top left 20% 应用于 CSS 背景图片，图片就会放置在框顶部，20% 值表示距框左侧（在 x 轴上）20% 的偏移量。
如果对 CSS 背景图片应用 background-position: top 20% left，则 20% 值表示相对于 CSS 框顶部（在 y 轴上）的偏移 20%，并且图片会放置在框的左侧。
当使用四个参数时，这两个关键字将与两个值配对，这些值对应于针对每个指定关键字源的偏移量。如果对背景图片应用 background-position: bottom 20% right 30%，则背景图片位置距离 CSS 框右侧 20%，距离 CSS 框右侧 30%。
以下演示演示了此行为：
以下是更多示例，说明如何混合使用 CSS 和关键字值来使用 background-position 属性：
背景大小
background-size 属性用于设置背景图片的尺寸；默认情况下，背景图片的尺寸取决于其固有（实际）宽度、高度和宽高比。
background-size 属性使用 CSS 长度和百分比值或特定关键字。该属性接受最多两个参数，对应于允许您单独更改背景的宽度和高度。
background-size 属性接受以下关键字：
auto：当单独使用时，背景图片的大小取决于其固有宽度和高度；当将auto与宽度（第一个参数）或高度（第二个参数）的其他 CSS 值一起使用时，系统会根据需要调整设置为auto的尺寸，以保持图片的自然宽高比。这是background-size属性的默认行为。cover：覆盖整个背景图层区域。这可能意味着图片被拉伸或剪裁。contain：调整图片大小以填充空间，而不进行拉伸或剪裁。因此，除非将background-repeat设置为no-repeat，否则系统可能会保留空白区域，从而导致图片重复显示。
后一个 2 旨在独立使用，无需其他参数。
以下演示演示了这些关键字的实际运用：
演示如何将这些关键字应用于 background-size：
背景附件
借助 background-attachment 属性，您可以在层在屏幕上可见后修改背景图片（背景层的一部分的图片）的固定位置行为。
它接受 3 个关键字：scroll、fixed和local。
background-attachment 属性的默认行为是 scroll 的初始值。当需要更多空间时，图片会随背景层中的相应空间一起移动，具体取决于 CSS 框的边界。
使用值 fixed 可将背景图片的位置固定在视口中。
一旦背景层图片最初占据的空间需要滚动（或渲染）到屏幕外，背景层中的图片就会固定在背景层中的原始位置，直到整个图层被视口滚动出屏幕为止。
local 关键字可让您相对于元素的内容固定背景图片的位置。现在，当背景图片在 CSS 框的内外层呈现时（通常是由于滚动、2D 或 3D 转换造成的）会沿着它们占据的空间移动。
后台源
借助 background-origin 属性，您可以修改与特定框关联的背景区域。该属性接受的值对应于 Box 的 border-box、padding-box 和 content-box 区域。
通过以下演示试用这些选项：
背景剪辑
background-clip 属性用于控制背景图层上可以看到的内容，而不管 background-origin 属性创建的边界如何。
与 background-origin 类似，可以指定的区域为 border-box、padding-box 和 content-box，分别对应于可以渲染 CSS 背景图层的位置。使用这些关键字时，如果背景的呈现区域超出指定区域，则会被裁剪或裁剪。
background-clip 属性还接受 text 关键字，该关键字将背景裁剪至不超过内容框中的文本。要使这种效果在 CSS 框中的实际文本中显而易见，文本必须部分或完全透明。
这是一项相对较新的属性，在撰写本文时，Chrome 和大多数浏览器都需要 -webkit- 前缀才能使用此属性。
多种背景
如本单元开始时所述，背景层允许定义多个子层。为简单起见，我将这些子图层称为背景。
从上到下定义了多个背景；第一个背景距离用户最近，最后一个背景距离用户最远。
浏览器将定义的唯一背景或最后一层指定为最终的背景层。只有此图层可以分配 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 框的左上角。
background-position 来更改背景图片的默认位置。默认情况下，背景图片不会重复。
background-repeat: no-repeat 来避免重复背景图片。此外，background-repeat: repeat-x 和 background-repeat: repeat-y 可用于防止在特定轴上重复。以下哪些 background-position 声明是有效的？
background-position: 50% leftbackground-position: top right 33%background-position: right bottombackground-position: left要将背景图片设置为固定在视口内，您可以使用：
background-position: fixedbackground-position 属性的无效值。”
background-fixed-to-viewport: truebackground-fixed-to-viewport。
background-attachment: fixedbackground-attachment: fixed 明确将背景图片设置为在当前视口内固定。background-attachment: scrollbackground-attachment”是用于设置要在视口内固定的背景图片的属性；不过，该属性的默认值是 scroll，该属性会将背景图片默认修复为不受框内内容影响的框。”
CSS 框中背景的默认 background-origin 为：
content-boxbackground-origin 的有效值，但不是默认值。
border-boxbackground-origin 的有效值，其预先排列的边框可在背景之上绘制，但并非默认边框。padding-boxbackground-origin 的默认值。允许背景在内容之外并向上呈现到框的边界上。
margin-boxbackground-origin 属性而言，该值无效。