CSS 背景模块 第4级

W3C 首次公开工作草案

关于本文档的更多信息
本版本:
https://www.w3.org/TR/2025/WD-css-backgrounds-4-20251125/
最新发布版本:
https://www.w3.org/TR/css-backgrounds-4/
编辑草案:
https://drafts.csswg.org/css-backgrounds-4/
历史记录:
https://www.w3.org/standards/history/css-backgrounds-4/
反馈:
CSSWG问题库
规范内反馈
编辑者:
Elika J. Etemad / fantasaiApple
Lea Verou受邀专家
受邀专家
前任编辑:
W3C
对本规范建议修改:
GitHub 编辑器
测试套件:
https://wpt.fyi/results/css/css-backgrounds/

摘要

本模块包含与页面上盒子背景相关的CSS特性。

CSS 是一种用于描述结构化文档(如 HTML 和 XML)在屏幕、纸张等介质上的渲染方式的语言。

本文档状态

本节描述了本文档在发布时的状态。 当前 W3C 规范及技术报告的最新版本 可在 W3C 标准和草案索引 找到。

本文档由 CSS 工作组 按照 推荐标准流程首次公开工作草案 的形式发布。 作为首次公开工作草案发布 并不代表 W3C 及其成员的认可。

本文档为草案 可能随时被更新、替换或废弃。 除了作为正在进行的工作外,不适宜引用本文件。

如需反馈 请通过 在 GitHub 提交 issue(推荐), 并在标题中包含规范编码“css-backgrounds”,格式如下: “[css-backgrounds] …评论概要…”。 所有问题和评论都会被 归档。 或者,反馈也可发送至(归档链接)公共邮件列表 www-style@w3.org

本文档受 2025年8月18日 W3C 流程文档 管辖。

本文件由遵循 W3C 专利政策 的小组产生。 W3C 维护了一份与本小组成果相关的专利披露公开列表; 该页面还包含专利披露说明。 任何实际知晓并相信其中包含必要权利要求的人 必须根据 W3C 专利政策第6节 披露相关信息。

1. 引言

当元素按照CSS 盒模型 [CSS-BOX-3]进行渲染时, 每个元素要么根本不显示, 要么被格式化为一个或多个矩形盒。 每个盒都有一个矩形的内容区, 内容区周围是一圈内边距(padding), 内边距周围是边框(border), 边框外面是外边距(margin)。 (margin 可以为负值, 但外边距不会影响背景和边框。)

Diagram of a typical box, showing the content, padding, border and margin areas
一个典型盒子的各个区域和边界。 (本图将在 CSS 盒模型模块 [CSS-BOX-3] 中解释。)

本模块中的属性用于处理内容内边距边框区域的背景。

如果一个元素被分割成多个盒片段box-decoration-break定义了 如何将边框和背景分配到不同的片段上。 (如果一个元素在行尾、列尾或页尾被拆分,在下一行、下一列或下一页继续,则该元素会产生多个片段。)

本模块给出了背景、边框和阴影的相对堆叠顺序。 关于这些层与其他渲染内容如何交互, 参见 [CSS2] 的附录 E“关于堆叠上下文的详细说明”。

1.1. 模块交互

本规范扩展了 CSS 背景与边框模块 3 级 [CSS3BG]中与背景相关的部分。

本规范为新增的 background-repeat-* 和 `background-position-*' 长属性、 允许定义不包含颜色的背景图层的新 background-tbd 属性, 以及为 background-clip 新增两个属性值制定了规范。

本模块中的所有属性都适用于 ::first-letter::first-line伪元素

1.2. 值定义

本规范遵循 [CSS2] 的 CSS 属性定义约定, 并采用 [CSS-VALUES-3] 的值定义语法。 未在本规范中定义的值类型在 CSS Values & Units [CSS-VALUES-3] 中有定义。 与其他 CSS 模块组合使用时,可能会扩展这些值类型的定义。 例如,与 CSS Images 组合后,可以将 CSS 渐变用作background-imageborder-image的值。 [CSS-IMAGES-3]

除了各自属性定义中列出的特定值之外, 本规范中定义的所有属性 还可以使用全局 CSS 关键字作为属性值。 为了易读性,文中未重复列出它们。

2. 背景定义

每个盒子都有一个背景层,默认情况下可能是完全透明的, 也可以用一种颜色和/或一幅或多幅图片填充。 背景属性指定要使用什么颜色(background-color) 和图片(background-image), 以及它们如何缩放、定位、平铺等。

背景属性不会被继承, 但由于 transparentbackground-color 的初始值,默认将显示父盒子的背景。

2.1. 基础颜色:background-color 属性

名称: background-color
值: <color>
初始值: transparent
适用元素: 所有元素
可继承: no
百分比值: N/A
计算值: computed color
规范顺序: per grammar
动画类型: by computed value
测试用例

该属性设置盒子的背景颜色。 此颜色会绘制在任何背景图片的下方。

示例:
h1 { background-color: #F00 } /* 将背景设为红色 */

背景颜色会根据与最底层背景图片层关联的background-clip属性值进行裁剪。

2.2. 图片来源:background-image 属性

名称: background-image
值: <bg-image>#
初始值: none
适用元素: 所有元素
可继承: no
百分比值: N/A
计算值: 列表,每项为 <image> 或关键字 none
规范顺序: per grammar
动画类型: 离散
测试用例

该属性指定元素的背景图片。 图片的绘制顺序为:第一个指定的图片在最上面(最接近用户),其余图片依次叠加在下方。 属性值为逗号分隔的<bg-image>值列表,其中

<bg-image> = <image> | none

当值为none时,算作一个背景图片层但不绘制任何内容。 空图片(宽度或高度为0)、下载失败、或无法显示(如图片不是支持的格式),也会被当作图片层,但不会绘制内容。

参见§ 3 多重背景图片分层,了解background-image如何与其它逗号分隔的背景属性共同组成每个背景图片层

设置背景图片时,作者应同时指定background-color,以便在图片无法使用时保持与文本的对比度。

为保证可访问性,作者不应仅用背景图片传递重要信息。 参考Web 内容可访问性指南F3 [WCAG20]。 在非图形化环境下图片不会被访问到, 背景图片在高对比度显示模式下尤其可能被禁用。

注意:CSS 可通过content 属性提供样式化前景图片。语义重要的前景图像应当直接写在文档中,例如使用 HTML 的 <img> 标签。

注意:媒体片段 可用于显示图片的一部分。 CSS Images 模块会提供图片格式的回退语法,并包括对图片显示的额外控制。

以下为指定背景图片的示例:
html { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }
main { background-image: radial-gradient(at bottom right, transparent, white); }

实现时可以进行优化,不下载和绘制不可见的图片(例如,被其他全不透明图片遮盖的图片)。

2.3. 平铺图片:background-repeat-xbackground-repeat-ybackground-repeat-blockbackground-repeat-inline 属性

名称: background-repeat-x, background-repeat-y, background-repeat-block, background-repeat-inline
值: <repetition>#
初始值: repeat
适用元素: 所有元素
可继承: no
百分比值: N/A
计算值: 如指定
规范顺序: per grammar
动画类型: 离散
逻辑属性组: background-repeat
<repetition> = repeat | space | round | no-repeat

这些属性用于指定背景图片在被缩放定位后,是否及如何沿某一方向平铺。

repeat
图片会在指定方向上重复,以覆盖整个背景绘制区域
space
图片会在指定方向上尽可能完整地平铺在背景定位区域,且不会被裁剪,之后等间距分布填满区域。 首张和末张图片紧贴区域边缘。 如果背景绘制区域大于定位区域,则整块图案会继续平铺以覆盖背景绘制区域。 该方向上的background-position值会被忽略, 除非该方向无法放下两张图像,这时图片只放一张,且background-position决定其位置。
round
图片会在指定方向上尽可能完整地平铺于背景定位区域。 如果无法平铺整数次,则图片会缩放以刚好整除。 相关公式见background-size。 如果背景绘制区域大于背景定位区域,则继续平铺以填满所有绘制区域。
no-repeat
图片只在指定方向上放置一次,不进行重复。

除非某一轴被设置为no-repeat,否则整个背景绘制区域都会被平铺,不仅仅是一条横向或纵向带。

示例:

body {
  background: white url("pendant.png");
  background-repeat-y: repeat;
  background-position: center;
}
A centered background image, with copies repeated up and down the border, padding, and content areas.
repeat-y效果: 一张背景图片居中放置,其余副本依次向上和向下排列,在元素后方形成纵向带状效果。

参见§ 3 多重背景图片分层,了解background-repeat-xbackground-repeat-ybackground-repeat-blockbackground-repeat-inline与其他逗号分隔的背景属性如何共同作用,组成每一层背景图片。

2.4. 平铺图片简写:background-repeat 属性

名称: background-repeat
值: <repeat-style>#
初始值: repeat
适用元素: 所有元素
可继承: no
百分比值: N/A
计算值: 列表,每项为一对二维关键字
规范顺序: per grammar
动画类型: 离散
测试用例

该简写属性用于设置background-repeat-xbackground-repeat-y 长属性的值。

<repeat-style> = repeat-x | repeat-y | repeat-block | repeat-inline | <repetition>{1,2}

<repeat-style> 的单值含义如下:

repeat-x
计算为 repeat no-repeat
repeat-y
计算为 no-repeat repeat
repeat-block
块轴(block axis) 上计算为 repeat, 在内联轴(inline axis)上计算为 no-repeat。
repeat-inline
内联轴(inline axis) 上计算为 repeat, 在块轴(block axis)上计算为 no-repeat。
repeat
计算为 repeat repeat
space
计算为 space space
round
计算为 round round
no-repeat
计算为 no-repeat no-repeat

如果 <repeat-style> 值有两个关键字, 第一个用于水平方向,第二个用于垂直方向。

示例:

body {
  background-image: url(dot.png) white;
  background-repeat: space;
}
Image of an element with a dotted background
space 的效果: 点状图片会平铺以覆盖整个背景,并且各图片间隔相等。

参见 § 3 多重背景图片分层,了解background-repeat 如何与其他逗号分隔的背景属性一起形成每一层背景图片。

是否应增加 'background-repeat: extend'

2.5. 固定图片:background-attachment 属性

名称: background-attachment
值: <attachment>#
初始值: scroll
适用元素: 所有元素
可继承: no
百分比值: N/A
计算值: 列表,每项为指定的关键字
规范顺序: per grammar
动画类型: 离散
测试用例

如果指定了背景图片, 此属性用于指定它们是 相对于视口固定(fixed), 还是随盒子(scroll)或其内容(local)一起滚动。 此属性的值为逗号分隔的<attachment>关键字列表:

<attachment> = scroll | fixed | local
fixed
背景相对于视口固定。 在没有视口的分页媒体中, fixed背景相对于页面盒固定,会在每一页重复。

注: 每个视图只有一个视口。 即使一个盒子是滚动容器fixed背景也不会随盒子移动。

local
背景相对于盒子的内容区域固定: 如果盒子有滚动机制, 背景会随内容区滚动, 背景绘制区域背景定位区域相对于盒子的可滚动溢出区域(而不是它们的边框)。 由于可滚动溢出区域不包含边框区域, 对于滚动容器border-box值的background-clip可视为与padding-box等同。
scroll
背景相对于盒子本身固定, 不随内容滚动。 (实际效果为贴紧盒子的边框。)

即使图片是fixed的, 只有当它位于盒子的背景绘制区域或未被裁剪时才可见。 (关于特殊情况参见§ 4 特殊元素的背景。) 因此,除非图片被平铺,否则可能不可见。

该示例创建了一个无限垂直条带效果,在文档滚动时始终“粘附”在视口上。
body {
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

注: 不支持fixed背景的用户代理 (比如硬件平台限制)会忽略带有fixed关键字的声明。 例如:

body {
  /* 适用于所有UA: */
  background: white url(paper.png) scroll;
  /* 适用于支持fixed背景的UA: */
  background: white url(ledger.png) fixed;
}
h1 {
  /* 适用于所有UA: */
  background: silver;
  /* 适用于支持fixed背景的UA: */
  background: url(stripe.png) fixed, white url(ledger.png) fixed;
}

参见§ 3 多重背景图片分层,了解background-attachment如何与其它逗号分隔的背景属性协作, 组成每一层背景图片层

2.6. 背景定位:background-position-xbackground-position-ybackground-position-inlinebackground-position-block 属性

本节尚在完善中,难点在于让所有 start/end 关键字表现一致。

名称: background-position-x
值: [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#
初始值: 0%
适用元素: 所有元素
可继承: no
百分比值: 相对于背景定位区域的宽度减去背景图片的宽度
计算值: 列表,每项为:一个计算后的<length-percentage>偏移,加一个原点关键字
规范顺序: per grammar
动画类型: 可重复列表
逻辑属性组: background-position

该属性用于指定背景定位的横向分量。省略原点关键字时,默认为left

名称: background-position-y
值: [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#
初始值: 0%
适用元素: 所有元素
可继承: no
百分比值: 相对于背景定位区域的高度减去背景图片的高度
计算值: 列表,每项为:一个计算后的<length-percentage>偏移,加一个原点关键字
规范顺序: per grammar
动画类型: 可重复列表
逻辑属性组: background-position

该属性用于指定背景定位的纵向分量。省略原点关键字时,默认为top

名称: background-position-inline
值: [ center | [ [ start | end ]? <length-percentage>? ]! ]#
初始值: 0%
适用元素: 所有元素
可继承: no
百分比值: 相对于背景定位区域的inline-size减去背景图片的inline-size
计算值: 列表,每项为:一个计算后的<length-percentage>偏移,加一个原点关键字
规范顺序: per grammar
动画类型: 可重复列表
逻辑属性组: background-position

该属性用于指定背景定位的内联轴分量。省略原点关键字时,默认为start

名称: background-position-block
值: [ center | [ [ start | end ]? <length-percentage>? ]! ]#
初始值: 0%
适用元素: 所有元素
可继承: no
百分比值: 相对于背景定位区域尺寸减去背景图片尺寸
计算值: 列表,每项为:一个计算后的<length-percentage>偏移,加一个原点关键字
规范顺序: per grammar
动画类型: 可重复列表
逻辑属性组: background-position

该属性用于指定背景定位的块轴分量。省略原点关键字时,默认为start

<percentage>
横向偏移的百分比相对于 (背景定位区域宽度 - 背景图片宽度)。 纵向偏移的百分比相对于 (背景定位区域高度 - 背景图片高度), 其中图片尺寸由background-size决定。
例如,值对0% 0% 表示图片左上角与(通常为)盒子的内边距边缘对齐。 值对100% 100%会将图片右下角放在区域右下角。 值对75% 50%表示图片上距离75%、下距离50%的点与区域同样位置对齐。
Diagram of image position within element
background-position: 75% 50% 的示意图。
<length>
长度值表示偏移的固定距离。例如,2cm 1cm 表示图片左上角放在定位区域左上角右移2cm、下移1cm的位置。
top
若指定一或两个值,纵向为0%,否则指定下一个偏移的起点为上边缘。
right
若指定一或两个值,横向为100%,否则指定下一个偏移的起点为右边缘。
bottom
若指定一或两个值,纵向为100%,否则指定下一个偏移的起点为下边缘。
left
若指定一或两个值,横向为0%,否则指定下一个偏移的起点为左边缘。
center
横向未指定则为50%left 50%), 否则纵向为50%top 50%)。
以下background 简写声明使用关键字设置background-position为对应百分比值:
body { background: url("banner.jpeg") right top }    /* 100%   0% */
body { background: url("banner.jpeg") top center }   /*  50%   0% */
body { background: url("banner.jpeg") center }       /*  50%  50% */
body { background: url("banner.jpeg") bottom }       /*  50% 100% */
下例中,图片放置在视口右下角:
body {
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}
背景定位也可以相对于其他角落。例如,以下设置将图片放在距右侧3em、距底部10px的位置:
background-position: right 3em bottom 10px

参见§ 3 多重背景图片分层,了解background-position如何与其它逗号分隔的背景属性协作, 组成每一层背景图片层

2.7. 背景定位简写:background-position 简写属性

名称: background-position
值: <bg-position>#
初始值: 0% 0%
适用元素: 所有元素
可继承: no
百分比值: 相对于背景定位区域的尺寸减去背景图片尺寸;见正文
计算值: 列表,每项为一对自左上角起的(横、纵)偏移;每个偏移为一个计算后的<length-percentage>
规范顺序: per grammar
动画类型: 可重复列表
测试用例

如果已经指定了背景图片, 本属性用于指定这些图片在其对应的背景定位区域内(在任何调整大小之后)的初始位置。

该属性是一个简写属性,可以在一次声明中同时设置 background-position-xbackground-position-ybackground-position-blockbackground-position-inline

其值为逗号分隔的<bg-position>值列表,这些值会被解释为<position>, 其中缩放后的背景图片作为对齐对象背景定位区域作为对齐容器

注意: 关键字对可以互换顺序,而关键字与长度或百分比混用时顺序不可互换。 比如 center left 合法,50% left 非法。

如果给了三个或四个值,则每个<length-percentage>表示一个偏移,且必须位于关键字之后, 该关键字指定了偏移的起始边。 例如 background-position: bottom 10px right 20px 表示 从底部边缘向上偏移10px,从右侧边缘向左偏移20px。 如果只给三个值,缺失的偏移视为零。

正值表示从背景定位区域边缘向内偏移, 负值表示从背景定位区域边缘向外偏移。

下列声明给出了距离左上角的(横向,纵向)偏移:
background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */
<bg-position> =  <position> | <position-three>
<position-three> = [
  [ left | center | right ] && [ [ top | bottom ] <length-percentage> ]
|
  [ [ left | right ] <length-percentage> ] && [ top | center | bottom ]
]

background-position专用的<position-three>语法形式中,省略的<length-percentage>默认为0%

需要规定如何设置长属性[Issue #9690]

2.7.1. background-position 值的序列化

指定值计算值 对于<bg-position>类型的序列化 与[CSS-VALUES-4]<position>的规定完全一致。 对于三值写法(该写法在<position>中无效), 指定值的序列化与等价的四值形式完全相同,仅保留省略的偏移。

2.8. 绘制区域:background-clip 属性

名称: background-clip
值: <bg-clip>#
初始值: border-box
适用元素: 所有元素
可继承: no
百分比值: n/a
计算值: 如指定
规范顺序: per grammar
动画类型: 可重复列表
测试用例

决定背景绘制区域, 即决定背景绘制在哪个区域内。 该属性的语法如下:

<bg-clip> = <visual-box> | [ border-area || text ]

或者是否应该专门定义 -webkit-background-clip 属性, 说明所有值都完全一致,仅此处额外增加了text值?

<visual-box>
背景在指定的元素盒内(剪裁到该盒)绘制。
text
背景在边框盒与文本几何的交集内绘制(并裁剪到该交集),该文本几何包括任何装饰以及元素及其流内和浮动后代中的着重符号。文本颜色不会影响背景的绘制。
border-area
背景剪裁到边框绘制的区域, 会考虑border-widthborder-style,但会忽略border-color引入的透明度。

如果同时指定了border-areatext, 则背景会在这两个区域的并集内(剪裁到该区域)绘制。

注意: 根元素的背景绘制区域不同,因此对其指定background-clip属性无效。 参见§ 4 特殊元素背景

注意: 背景总是绘制在边框后面(如有)。 详见[CSS2] 附录E“堆叠上下文详细说明”。

关于border-radius 如何影响背景绘制区域的形状,参见 CSS Borders and Box Decorations 4 § 3.3 Corner Shaping: the corner-shape property

参见§ 3 多重背景图片分层,了解background-clip如何与其它逗号分隔的背景属性共同组成每个背景图片层

2.9. 定位区域:background-origin 属性

名称: background-origin
值: <visual-box>#
初始值: padding-box
适用元素: 所有元素
可继承: no
百分比值: N/A
计算值: 列表,每一项为指定的关键字
规范顺序: per grammar
动画类型: 可重复列表
测试用例

该属性决定背景定位区域: 即用于定位任何背景图片的区域。 对于被渲染为多个盒片段的元素 (如多行的内联盒、多页的盒), 此属性指定box-decoration-break [CSS-BREAK-3] 应作用于哪些盒, 以确定背景定位区域。

padding-box
定位相对于padding box。 (对于单个盒,0 0是内边距边缘的左上角,100% 100%是右下角。)
border-box
定位相对于border box
content-box
定位相对于content box

如果该background-attachment属性值为当前层fixed, 则本属性无效: 此时背景定位区域初始包含块

注意:如果background-clippadding-boxbackground-originborder-boxbackground-positiontop left (初始值), 且元素有非零边框时, 背景图片的上边和左边会被裁剪。

参见§ 3 多重背景图片分层,了解background-origin如何与其它逗号分隔的背景属性一起组成立每一层背景图片层

2.10. 图片尺寸:background-size 属性

名称: background-size
值: <bg-size>#
初始值: auto
适用元素: 所有元素
可继承: no
百分比值: 见正文
计算值: 列表, 每项为一对尺寸(每个方向一个), 每项分别为关键字或计算值<length-percentage>
规范顺序: per grammar
动画类型: 可重复列表
测试用例

该属性指定每个背景图片的尺寸。 属性值为逗号分隔的<bg-size>值,其中

<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain

各个值的意义如下:

contain
在保持图片自然宽高比(如有)的同时,将图片缩放到最大,使其宽高都能完全适配在背景定位区域内。
cover
保持图片自然宽高比(如有)不变,将其缩放到最小尺寸以完全覆盖背景定位区域
[ <length-percentage [0,∞]> | auto ]{1,2}
第一个值指定对应图片的宽度,第二个值指定高度。 若只给一个值,第二个视为auto

<percentage>相对于背景定位区域

若某一方向值为auto,使用图片的自然宽高比和另一方向尺寸解析, 若没有则用自然尺寸, 若还没有,则视为100%

如果两个值都是auto,优先使用图片的自然宽度高度, 如果有缺失,则缺失方向表现为auto(行为同前述)。 若图片没有自然尺寸, 则按contain计算。

负值无效。

以下是一些示例。 第一个示例分别在两个方向上拉伸图片以完全填满内容区:
div {
  background-image: url(plasma.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: content-box;
}

第二个示例将图片拉伸,使得水平方向正好可容纳两张图片,宽高比保持:

p {
  background-image: url(tubes.png);
  background-size: 50% auto;
  background-origin: border-box;
}

此例将背景图片强制为15×15像素:

p {
  background-size: 15px 15px;
  background-image: url(tile.png);
}

此例使用图片的自然尺寸。注意:在CSS一级和二级这是唯一的行为。

body {
  background-size: auto;            /* 默认 */
  background-image: url(flower.png);
}

下例将图片高度四舍五入到33.3%,高于设定的30%。 30%时,整体能完整呈现三个图像,第四只能部分呈现。四舍五入后恰好3张刚好填满。 图片宽度是定位区域宽度的20%,不做四舍五入。

p {
  background-image: url(chain.png);
  background-repeat: no-repeat round;
  background-size: 20% 30%;
}

background-repeat在某一(或两)方向上为round, 会有第二步。 UA 必须在该方向上缩放图片, 使图片刚好可以整数次填满背景定位区域。 针对宽度(高度同理):

X ≠ 0为第一步结束后图片宽度,W为背景定位区域宽度, 四舍五入后的宽度X' = W / round(W / X), 其中round()为取最接近的正整数的函数。

background-repeat仅一方向为round, 且background-size另一方向为auto, 则有第三步:另一方向缩放以恢复原宽高比。

本例中背景图像显示为其自然尺寸:
div {
  background-image: url(image1.png);
  background-repeat: repeat;         /* 默认 */
  background-size: auto;             /* 默认 */
}

下例背景宽为3em,高度按原宽高比等比缩放:

div {
  background-image: url(image2.png);
  background-repeat: repeat;         /* 默认 */
  background-size: 3em;              /* = '3em auto' */
}

下例背景图像宽约为3em,缩放后可以整数次铺满容器宽度。高度依然等比缩放:

div {
  background-image: url(image3.png);
  background-repeat: round repeat;
  background-size: 3em auto;
}

下例宽3em,高度为与此宽度下原宽高比对应的值,或稍小:

div {
  background-image: url(image4.png);
  background-repeat: repeat round;
  background-size: 3em auto;
}

下例背景高约为4em,略微缩放以刚好整数次铺满高度。宽度相当于4em高度时原宽高比下的宽度,并略微缩放以整数次铺满背景宽度:

div {
  background-image: url(image5.png);
  background-repeat: round;
  background-size: auto 4em;
}

如果背景图像宽高解析后的值为零,则图片不显示。(效果等同于透明图片。)

参见§ 3 多重背景图片分层,了解background-size如何与其它逗号分隔的背景属性一起组成立每一层背景图片层

2.10.1. background-size 值的序列化

指定值计算值 对于<bg-size>类型 总是序列化为两个值,即使第二个值为auto, 这是基于最短、向后兼容的序列化原则

2.11. 背景图片图层:background-tbd 简写属性

尚不可实现

本节暂不适合实现,仅用于记录理念并推动讨论。

如欲实现本节中内容,请先联系 CSSWG(www-style@w3.org)。

名称: background-tbd
值: <bg-layer>#
初始值: 见各单独属性
适用元素: 所有元素
可继承: no
百分比值: 见各单独属性
计算值: 见各单独属性
规范顺序: per grammar
动画类型: 见各单独属性

background-tbd 属性是一个简写属性,与background简写属性功能相同,但不包含background-color, 允许作者轻松声明和定位背景图像,同时让background-color独立级联。

此属性名称的讨论请见issue 9083

此示例在级联中后面设置了两层背景。 使用background-tbd时,先设置的background-color不会被覆盖。
p {
  background-color: green;
}

p {
  background-tbd:
    url(a.png) top left,
    url(b.png) top left no-repeat;
}
本例试图连同背景图片一起设置背景颜色。若需实现该行为,应使用background而非 background-tbd。 所以background-tbd声明会被舍弃。
p {
  background: url(pass.png) green;   /* valid */
  background-tbd: url(fail.png) red; /* invalid */
}

2.12. 背景简写:background 属性

名称: background
值: <bg-layer>#? , <final-bg-layer>
初始值: 见各单独属性
适用元素: 所有元素
可继承: no
百分比值: 见各单独属性
计算值: 见各单独属性
动画类型: 见各单独属性
规范顺序: per grammar
测试用例

background 属性是一个简写属性,可在样式表的同一位置设置大多数背景属性。 逗号分隔的项数决定了背景图片层的数量。 在一条合法声明中,对于每一层, 简写属性首先将background-imagebackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment 设置为 各自属性的初始值, 然后为该层赋予声明中明确指定的值。 最后,background-color被设置为指定的颜色(如有),否则为其初始值。

此属性的值为逗号分隔的值列表:

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <bg-clip> || <visual-box>
<final-bg-layer> =  <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <bg-clip> || <visual-box> || <'background-color'>

注意: <final-bg-layer> 允许包含颜色,但 <bg-layer> 不允许。

若出现一个<visual-box>值, 则同时设置 background-originbackground-clip 为此值; 但如果设置了只适用于 background-clip 的值,则 background-clip 使用该值,background-originborder-box。 如果有两个 <visual-box> 值, 则第一个赋给 background-origin,第二个赋给 background-clip

下例的第一条规则只指定了 background-color,其余属性取初始值。第二条规则指定了多个属性。
body { background: red }
p { background: url("chess.png") 40% / 10em gray
                round fixed border-box; }

第一条规则等价于:

body {
    background-color: red;
    background-position: 0% 0%;
    background-size: auto;
    background-repeat: repeat;
    background-clip: border-box;
    background-origin: padding-box;
    background-attachment: scroll;
    background-image: none }

第二条规则等价于:

p {
  background-color: gray;
  background-position: 40% 50%;
  background-size: 10em auto;
  background-repeat: round;
  background-clip: border-box;
  background-origin: border-box;
  background-attachment: fixed;
  background-image: url(chess.png);
}
下例同时设置了背景颜色(#CCC)和背景图片(url(metal.jpg))。 图片缩放到元素的全部宽度:
E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}
下例显示声明等价关系:
div {
  background: padding-box url(paper.jpg) white center;
}

div {
  background-color: white;
  background-image: url(paper.jpg);
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: center;
  background-clip: padding-box;
  background-origin: padding-box;
  background-size: auto auto;
}
下例为多层、逗号分隔的声明:
background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;

等价于

background-image:      url(a.png),  url(b.png),          url(c.png);
background-position:   top left,    center,              top left;
background-repeat:     no-repeat,   no-repeat,           repeat;
background-clip:       border-box,  border-box,          border-box;
background-origin:     padding-box, padding-box,         padding-box;
background-size:       auto auto,   100% 100%,           auto auto;
background-attachment: scroll,      scroll,              scroll;
background-color:      white;

3. 多重背景图片分层

一个盒子的背景可以有多个背景图片层。 层数由 background-image 属性中的逗号分隔值的数量确定。 注意 none 依然会创建一个层。

测试

每个背景图片都会根据其他背景属性的对应值进行缩放、定位和平铺。 各属性值列表从首项起一一对应,多余部分会被丢弃。 如果某一属性值不足对应所有层, UA 必须通过重复该值列表,直到足够为止,来计算用到的值

例如,以下声明:
background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;

与下组等价,多余的定位被丢弃, 而 background-originbackground-repeat 的缺失值(已加粗)被补全:

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;

列表中的第一张图片是最靠近用户的, 下一张依次覆盖在其下方,以此类推。 若有背景颜色,该颜色会画在所有其它下方。

注意: border-image 属性 也可以定义背景图片, 如定义则绘制在由 background 属性创建的之上。

4. 特殊元素的背景

文档画布是文档渲染时的无限表面。[CSS2] 由于没有元素直接对应 canvas, 为了允许对 canvas 进行样式设置, CSS 会将根元素(HTML 情况下为 <body> 元素) 的背景按照如下方式传递。 但如果 canvas 所用元素设置为display: nonecanvas 背景即为透明。

如果canvas 背景不透明, 下方的canvas 表面会显示出来。 canvas surface 的纹理由UA决定 (一般为不透明白色)。

4.1. 画布背景与根元素

根元素的背景成了canvas 背景,其背景绘制区域 会扩展覆盖整个canvas。 但所有图片的尺寸与定位均相对于根元素盒计算, 就如仅为该元素作画一样。 (也就是说,背景定位区域同根元素一致。) 根元素不会再次绘制背景, 即其背景的实际值transparent

测试用例

4.2. 画布背景与 HTML <body> 元素

对于其根元素为 HTML HTML 元素 或 XHTML html 元素 [HTML] 的文档: 如果background-image根元素上的计算值none,且其 background-colortransparent, 用户代理必须改为从该元素的第一个 HTML BODY 或 XHTML body 子元素 传播这些背景属性的 计算值。 该 BODY 元素的背景属性的 使用值 为它们的 初始值, 且传播得到的属性值视为指定在根元素上一样处理。 推荐 HTML 文档作者通过 BODY 元素 而非 HTML 元素来指定画布背景。

测试用例

注意: 使用 containment(封装) 会禁用对 HTML body 元素的这种特殊处理。 详情参见 CSS Containment 1 § 2 强封装:contain 属性

按照这些规则,以下 HTML 文档的底层画布将具有“大理石”背景:
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN'
  >
<html>
  <head>
    <title>设置画布背景</title>
    <style type="text/css">
       body { background: url("http://example.org/marble.png") }
    </style>
  </head>
  <body>
    <p>我的背景是大理石。</p>
  </body>
</html>

4.3. ::first-line 伪元素的背景

::first-line 伪元素 在背景处理上表现得像一个内联级元素 (参见 [CSS2] 第5.12.1节)。 这意味着,例如在首行左对齐的情况下,背景不一定会延伸到最右边缘。

测试用例

5. 变更

5.1. [CSS3BG] 起的新增内容

6. 致谢

除了本模块前身 [CSS1][CSS2][CSS3BG] 的众多贡献者外, 编辑们还要特别感谢 Tab Atkins、 以及 Håkon Wium Lie 针对 Level 4 的建议与反馈。

隐私注意事项

当前尚未有关于本规范的新隐私注意事项报告。

安全性注意事项

当前尚未有关于本规范的新安全性注意事项报告。

一致性

文档约定

一致性要求通过描述性断言和 RFC 2119 术语表达。规范正文中“MUST”、“MUST NOT”、“REQUIRED”、“SHALL”、“SHALL NOT”、“SHOULD”、“SHOULD NOT”、“RECOMMENDED”、“MAY”、“OPTIONAL”这些关键词在本规范中解释方式同 RFC 2119。为便于阅读,本文不使用全大写。

本规范除明确标注为非规范性部分、示例和注释外,所有文本均为规范性内容。[RFC2119]

本规范中的示例以“for example”开头,或使用 class="example" 与规范性文本区分,如下所示:

这是一个非规范性示例。

信息性注释以“Note”开头,并以 class="note" 与规范性文本区分,如下所示:

注意,这是一个信息性注释。

建议内容为规范性部分,通过 <strong class="advisement"> 单独着重显示,如: UA 必须提供可访问性替代方案。

测试

与本规范内容相关的测试可作为“Tests”区块进行记录。该区块中的内容均为非规范性。


一致性类别

本规范定义了三种一致性类别:

样式表
一份CSS 样式表
渲染器
一款UA,能解释样式表语义并渲染所用文档。
创作工具
一款UA,可编写样式表。

当样式表中所有使用本模块语法的陈述均符合通用 CSS 语法及本模块各特性单独语法时,样式表即符合本规范。

当渲染器不仅可按相关规范解释样式表,并能正确解析并按规范实现本规范全部特性的渲染时,该渲染器即可视为符合本规范。但若因设备限制无法正确渲染某文档,并不构成 UA 不符合要求。例如:UA 并不要求在单色显示器上渲染颜色。

当创作工具可输出语法正确的样式表,且样式表符合本模块描述的所有其他要求时,该作者工具即符合本规范。

部分实现

为便于作者利用前向兼容解析规则设置回退值,CSS 渲染器必须将所有自身无法有效支持的@规则、属性、属性值、关键字和其他语法结构视为无效,并作适当忽略。特别是,UA 不得在多值声明中选择性地忽略不支持的分量,只保留支持的值:如果任何值被视为无效(即不支持),CSS 要求整条声明被忽略。

不稳定和专有特性的实现

为避免与未来稳定 CSS 特性冲突,CSSWG 建议遵循最佳实践以实现不稳定特性和专有扩展

非实验性实现

当规范进入候选推荐阶段后,可以开始非实验性实现,且实现者应释出不带前缀的实现,只要可证明其正确实现了规范。

为确保并维护 CSS 在各实现间的互操作性,CSS 工作组建议非实验性 CSS 渲染器在发布不带前缀的实现前,向 W3C 提交实现报告(如有必要也包括测试用例)。提交给 W3C 的测试用例将接受 CSS 工作组的审查与修正。

关于提交测试用例及实现报告的更多信息,请参见 CSS 工作组网站:https://www.w3.org/Style/CSS/Test/。 如有疑问,请联系邮件列表 public-css-testsuite@w3.org

索引

本规范定义的术语

引用文献定义的术语

参考文献

规范性引用

[CSS-2023]
Chris Lilley; et al. CSS Snapshot 2023. 7 December 2023. NOTE. URL: https://www.w3.org/TR/css-2023/
[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. 11 March 2025. WD. URL: https://www.w3.org/TR/css-align-3/
[CSS-BORDERS-4]
Elika Etemad; et al. CSS Borders and Box Decorations Module Level 4. 22 July 2025. FPWD. URL: https://www.w3.org/TR/css-borders-4/
[CSS-BOX-3]
Elika Etemad. CSS Box Model Module Level 3. 11 April 2024. REC. URL: https://www.w3.org/TR/css-box-3/
[CSS-BOX-4]
Elika Etemad. CSS Box Model Module Level 4. 4 August 2024. WD. URL: https://www.w3.org/TR/css-box-4/
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 4. 18 December 2018. FPWD. URL: https://www.w3.org/TR/css-break-4/
[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. 13 January 2022. CR. URL: https://www.w3.org/TR/css-cascade-5/
[CSS-COLOR-4]
Chris Lilley; Tab Atkins Jr.; Lea Verou. CSS Color Module Level 4. 24 April 2025. CRD. URL: https://www.w3.org/TR/css-color-4/
[CSS-COLOR-5]
Chris Lilley; et al. CSS Color Module Level 5. 18 March 2025. WD. URL: https://www.w3.org/TR/css-color-5/
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. 6 November 2025. WD. URL: https://www.w3.org/TR/css-display-4/
[CSS-IMAGES-3]
Tab Atkins Jr.; Elika Etemad; Lea Verou. CSS Images Module Level 3. 18 December 2023. CRD. URL: https://www.w3.org/TR/css-images-3/
[CSS-OVERFLOW-3]
Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. 7 October 2025. WD. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-PSEUDO-4]
Elika Etemad; Alan Stearns. CSS Pseudo-Elements Module Level 4. 27 June 2025. WD. URL: https://www.w3.org/TR/css-pseudo-4/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 22 March 2024. CRD. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 12 March 2024. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-VALUES-5]
Tab Atkins Jr.; Elika Etemad; Miriam Suzanne. CSS Values and Units Module Level 5. 11 November 2024. WD. URL: https://www.w3.org/TR/css-values-5/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 30 July 2019. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC. URL: https://www.w3.org/TR/CSS2/
[CSS3-EXCLUSIONS]
Rossen Atanassov; Vincent Hardy; Alan Stearns. CSS Exclusions Module Level 1. 15 January 2015. WD. URL: https://www.w3.org/TR/css3-exclusions/
[CSS3BG]
Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 11 March 2024. CRD. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSSOM-1]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). 26 August 2021. WD. URL: https://www.w3.org/TR/cssom-1/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[MEDIAQUERIES-5]
Dean Jackson; et al. Media Queries Level 5. 18 December 2021. WD. URL: https://www.w3.org/TR/mediaqueries-5/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119

参考性引用

[CSS-BREAK-3]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 4 December 2018. CR. URL: https://www.w3.org/TR/css-break-3/
[CSS-CONTAIN-1]
Tab Atkins Jr.; Florian Rivoal. CSS Containment Module Level 1. 25 June 2024. REC. URL: https://www.w3.org/TR/css-contain-1/
[CSS-CONTAIN-2]
Tab Atkins Jr.; Florian Rivoal; Vladimir Levin. CSS Containment Module Level 2. 17 September 2022. WD. URL: https://www.w3.org/TR/css-contain-2/
[CSS-CONTENT-3]
Elika Etemad; Dave Cramer. CSS Generated Content Module Level 3. 2 August 2019. WD. URL: https://www.w3.org/TR/css-content-3/
[CSS1]
Håkon Wium Lie; Bert Bos. Cascading Style Sheets, level 1. 13 September 2018. REC. URL: https://www.w3.org/TR/CSS1/
[WCAG20]
Ben Caldwell; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. REC. URL: https://www.w3.org/TR/WCAG20/

属性索引

名称 初始值 适用对象 是否继承 百分比 动画类型 规范顺序 计算值 逻辑属性组
background <bg-layer>#? , <final-bg-layer> 见各单独属性 所有元素 见各单独属性 见各单独属性 per grammar 见各单独属性
background-attachment <attachment># scroll 所有元素 N/A discrete per grammar 列表,每项为指定关键字
background-clip <bg-clip># border-box 所有元素 n/a 可重复列表 per grammar 如指定
background-color <color> transparent 所有元素 N/A 按计算值 per grammar 计算后的颜色
background-image <bg-image># none 所有元素 N/A discrete per grammar 列表,每项为 <image> 或关键字 none
background-origin <visual-box># padding-box 所有元素 N/A 可重复列表 per grammar 列表,每项为指定关键字
background-position <bg-position># 0% 0% 所有元素 参见正文:相对于背景定位区域尺寸减去图片尺寸 可重复列表 per grammar 列表,每项为一对偏移(横向、纵向),每个偏移为计算后的 <length-percentage> 值
background-position-block [ center | [ [ start | end ]? <length-percentage>? ]! ]# 0% 所有元素 参见正文:相对于背景定位区域尺寸减去图片尺寸 可重复列表 per grammar 列表,每项为:一个计算后的 <length-percentage> 偏移值,加一个原点关键字 background-position
background-position-inline [ center | [ [ start | end ]? <length-percentage>? ]! ]# 0% 所有元素 参见正文:相对于背景定位区域的 inline-size 减去图片的 inline-size 可重复列表 per grammar 列表,每项为:一个计算后的 <length-percentage> 偏移值,加一个原点关键字 background-position
background-position-x [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]# 0% 所有元素 参见正文:相对于背景定位区域宽度减去图片宽度 可重复列表 per grammar 列表,每项为:一个计算后的 <length-percentage> 偏移值,加一个原点关键字 background-position
background-position-y [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]# 0% 所有元素 参见正文:相对于背景定位区域高度减去图片高度 可重复列表 per grammar 列表,每项为:一个计算后的 <length-percentage> 偏移值,加一个原点关键字 background-position
background-repeat <repeat-style># repeat 所有元素 N/A discrete per grammar 列表,每项为一对关键字(每个维度一个)
background-repeat-block <repetition># repeat 所有元素 N/A discrete per grammar 如指定 background-repeat
background-repeat-inline <repetition># repeat 所有元素 N/A discrete per grammar 如指定 background-repeat
background-repeat-x <repetition># repeat 所有元素 N/A discrete per grammar 如指定 background-repeat
background-repeat-y <repetition># repeat 所有元素 N/A discrete per grammar 如指定 background-repeat
background-size <bg-size># auto 所有元素 见正文 可重复列表 per grammar 列表,每项为一对尺寸(每轴一个),可为关键字或计算后的 <length-percentage> 值
background-tbd <bg-layer># 见各单独属性 所有元素 见各单独属性 见各单独属性 per grammar 见各单独属性

问题索引

是否应增加 'background-repeat: extend'
本节尚在完善中。难点在于让所有 start/end 关键字表现一致。
需要规定如何设置 longhand properties[Issue #9690]
或者是否应定义 -webkit-background-clip 属性,说明所有值相同,并增加 text 值?
此属性名称的讨论见 issue 9083