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;
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;
background-position: bottom 88% right 33%;
background-position: right 33% bottom 88%;
background-position: 88% 33% 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">
多种背景
如本单元开头所述,背景层允许定义多个子图层。为简单起见,我将将这些子图层称为背景。
从上到下定义了多个背景;第一个背景离用户最近,最后一个背景离用户最远。
所定义的唯一背景或最后一层由浏览器指定为“最终背景层”。只有此图层才能分配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-position: left
background-position: top right 33%
background-position: 50% left
background-position: right bottom
要将背景图片设置为在视口内固定,请使用以下代码:
background-position: fixed
background-attachment: fixed
background-attachment: scroll
background-fixed-to-viewport: true
CSS 框中的背景的默认 background-origin 为:
content-box
margin-box
padding-box
border-box