1. 引言
当元素按照CSS 盒模型 [CSS-BOX-3]进行渲染时, 每个元素要么根本不显示, 要么被格式化为一个或多个矩形盒。 每个盒都有一个矩形的内容区, 内容区周围是一圈内边距(padding), 内边距周围是边框(border), 边框外面是外边距(margin)。 (margin 可以为负值, 但外边距不会影响背景和边框。)
如果一个元素被分割成多个盒片段,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-image或border-image的值。 [CSS-IMAGES-3]
除了各自属性定义中列出的特定值之外, 本规范中定义的所有属性 还可以使用全局 CSS 关键字作为属性值。 为了易读性,文中未重复列出它们。
2. 背景定义
每个盒子都有一个背景层,默认情况下可能是完全透明的, 也可以用一种颜色和/或一幅或多幅图片填充。 背景属性指定要使用什么颜色(background-color) 和图片(background-image), 以及它们如何缩放、定位、平铺等。
背景属性不会被继承, 但由于 transparent 是 background-color 的初始值,默认将显示父盒子的背景。
2.1. 基础颜色:background-color 属性
| 名称: | background-color |
|---|---|
| 值: | <color> |
| 初始值: | transparent |
| 适用元素: | 所有元素 |
| 可继承: | no |
| 百分比值: | N/A |
| 计算值: | computed color |
| 规范顺序: | per grammar |
| 动画类型: | by computed value |
测试用例
- background-color-animation-backdrop-infinite-duration-crash.html (在线测试) (源码)
- background-color-animation-custom-property.html (在线测试) (源码)
- background-color-animation-custom-timing-function-reverse.html (在线测试) (源码)
- background-color-animation-custom-timing-function.html (在线测试) (源码)
- background-color-animation-element-not-visible-at-current-viewport.html (在线测试) (源码)
- background-color-animation-fallback-additive-keyframe.html (在线测试) (源码)
- background-color-animation-fallback-missing-0-percent.html (在线测试) (源码)
- background-color-animation-fallback-missing-100-percent.html (在线测试) (源码)
- background-color-animation-fallback-replace.html (在线测试) (源码)
- background-color-animation-field-crash.html (在线测试) (源码)
- background-color-animation-fragmented.html (在线测试) (源码)
- background-color-animation-half-opaque.html (在线测试) (源码)
- background-color-animation-in-body.html (在线测试) (源码)
- background-color-animation-non-empty-no-draw-crash.html (在线测试) (源码)
- background-color-animation-non-zero-size-element-change-to-zero.html (在线测试) (源码)
- background-color-animation-pseudo-element.html (在线测试) (源码)
- background-color-animation-removed-element-crash.html (在线测试) (源码)
- background-color-animation-single-keyframe.html (在线测试) (源码)
- background-color-animation-three-keyframes1.html (在线测试) (源码)
- background-color-animation-three-keyframes2.html (在线测试) (源码)
- background-color-animation-three-keyframes3.html (在线测试) (源码)
- background-color-animation-will-change-contents.html (在线测试) (源码)
- background-color-animation-with-blur.html (在线测试) (源码)
- background-color-animation-with-images.html (在线测试) (源码)
- background-color-animation-with-mask.html (在线测试) (源码)
- background-color-animation-with-table1.html (在线测试) (源码)
- background-color-animation-with-table2.html (在线测试) (源码)
- background-color-animation-with-table3.html (在线测试) (源码)
- background-color-animation-with-table4.html (在线测试) (源码)
- background-color-animation-with-zero-playbackRate.html (在线测试) (源码)
- background-color-animation-zero-size-element-change-to-non-zero.html (在线测试) (源码)
- background-color-animation-zero-size-element.html (在线测试) (源码)
- background-color-animation.html (在线测试) (源码)
- background-color-interpolation.html (在线测试) (源码)
- background-color-scroll-into-viewport.html (在线测试) (源码)
- background-color-transition-colormix.html (在线测试) (源码)
- background-color-transition-currentcolor.html (在线测试) (源码)
- background-color-transition.html (在线测试) (源码)
- background-color-transparent-animation-in-body.html (在线测试) (源码)
- background-color-animation-with-zero-alpha.html (在线测试) (源码)
- background-color-transition-obscured.html (在线测试) (源码)
- background-color-transition-with-delay.html (在线测试) (源码)
- background-color-transition-with-initially-transparent.html (在线测试) (源码)
- two-background-color-animation-diff-length1.html (在线测试) (源码)
- two-background-color-animation-diff-length2.html (在线测试) (源码)
- two-background-color-animation-diff-length3.html (在线测试) (源码)
- background-none-none-and-color.html (在线测试) (源码)
- background-color-body-propagation-001.html (在线测试) (源码)
- background-color-body-propagation-002.html (在线测试) (源码)
- background-color-body-propagation-003.html (在线测试) (源码)
- background-color-body-propagation-004.html (在线测试) (源码)
- background-color-body-propagation-005.html (在线测试) (源码)
- background-color-body-propagation-006.html (在线测试) (源码)
- background-color-body-propagation-007.html (在线测试) (源码)
- background-color-body-propagation-008.html (在线测试) (源码)
- background-color-body-propagation-009.html (在线测试) (源码)
- background-color-clip.html (在线测试) (源码)
- background-color-root-propagation-001.html (在线测试) (源码)
- background-color-root-propagation-002.html (在线测试) (源码)
- bg-color-with-gradient.html (在线测试) (源码)
- child-move-reveals-parent-background.html (在线测试) (源码)
- color-mix-currentcolor-background-repaint-parent.html (在线测试) (源码)
- color-mix-currentcolor-background-repaint.html (在线测试) (源码)
- simple-bg-color.html (在线测试) (源码)
- inheritance.sub.html (live test) (源码)
- inline-background-rtl-001.html (在线测试) (源码)
- background-color-computed.html (在线测试) (源码)
- background-color-invalid.html (在线测试) (源码)
- background-color-valid.html (在线测试) (源码)
- color-behind-images.htm (visual test) (源码)
该属性设置盒子的背景颜色。 此颜色会绘制在任何背景图片的下方。
背景颜色会根据与最底层背景图片层关联的background-clip属性值进行裁剪。
2.2. 图片来源:background-image 属性
| 名称: | background-image |
|---|---|
| 值: | <bg-image># |
| 初始值: | none |
| 适用元素: | 所有元素 |
| 可继承: | no |
| 百分比值: | N/A |
| 计算值: | 列表,每项为 <image> 或关键字 none |
| 规范顺序: | per grammar |
| 动画类型: | 离散 |
测试用例
- background-image-001.html (在线测试) (源码)
- background-image-002.html (在线测试) (源码)
- background-image-003.html (在线测试) (源码)
- background-image-004.html (在线测试) (源码)
- background-image-005.html (在线测试) (源码)
- background-image-006.html (在线测试) (源码)
- background-image-007.html (在线测试) (源码)
- background-image-centered-with-border-radius.html (在线测试) (源码)
- background-image-centered.html (在线测试) (源码)
- background-image-cors-no-reload.html (在线测试) (源码)
- background-image-cover-zoomed-1.html (在线测试) (源码)
- background-image-first-letter.html (在线测试) (源码)
- background-image-first-line.html (在线测试) (源码)
- background-image-gradient-currentcolor-conic-repaint.html (在线测试) (源码)
- background-image-gradient-currentcolor-linear-repaint.html (在线测试) (源码)
- background-image-gradient-currentcolor-radial-repaint.html (在线测试) (源码)
- background-image-gradient-currentcolor-visited.html (在线测试) (源码)
- background-image-gradient-interpolation-repaint.html (在线测试) (源码)
- background-image-large-with-auto.html (在线测试) (源码)
- background-image-none-gradient-repaint.html (在线测试) (源码)
- background-image-shared-stylesheet.html (在线测试) (源码)
- background-image-table-cells-straddling-no-repeat.html (在线测试) (源码)
- background-image-table-cells-zoomed.html (在线测试) (源码)
- background-image-with-border-radius-fidelity.html (在线测试) (源码)
- background-image-interpolation.html (在线测试) (源码)
- inheritance.sub.html (live test) (源码)
- background-image-computed.sub.html (在线测试) (源码)
- background-image-invalid.html (在线测试) (源码)
- background-image-valid.html (在线测试) (源码)
该属性指定元素的背景图片。 图片的绘制顺序为:第一个指定的图片在最上面(最接近用户),其余图片依次叠加在下方。 属性值为逗号分隔的<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-x、background-repeat-y、background-repeat-block 和 background-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;
}
参见§ 3 多重背景图片分层,了解background-repeat-x、background-repeat-y、background-repeat-block和background-repeat-inline与其他逗号分隔的背景属性如何共同作用,组成每一层背景图片。
2.4. 平铺图片简写:background-repeat 属性
| 名称: | background-repeat |
|---|---|
| 值: | <repeat-style># |
| 初始值: | repeat |
| 适用元素: | 所有元素 |
| 可继承: | no |
| 百分比值: | N/A |
| 计算值: | 列表,每项为一对二维关键字 |
| 规范顺序: | per grammar |
| 动画类型: | 离散 |
测试用例
- discrete-no-interpolation.html (在线测试) (源码)
- background-repeat-round-1a.html (在线测试) (源码)
- background-repeat-round-1b.html (在线测试) (源码)
- background-repeat-round-1c.html (在线测试) (源码)
- background-repeat-round-1d.html (在线测试) (源码)
- background-repeat-round-1e.html (在线测试) (源码)
- background-repeat-round-2.html (在线测试) (源码)
- background-repeat-round-3.html (在线测试) (源码)
- background-repeat-round-4.html (在线测试) (源码)
- background-repeat-space-10.html (在线测试) (源码)
- background-repeat-space-1a.html (在线测试) (源码)
- background-repeat-space-1b.html (在线测试) (源码)
- background-repeat-space-1c.html (在线测试) (源码)
- background-repeat-space-2.html (在线测试) (源码)
- background-repeat-space-3.html (在线测试) (源码)
- background-repeat-space-4.html (在线测试) (源码)
- background-repeat-space-5.html (在线测试) (源码)
- background-repeat-space-6.html (在线测试) (源码)
- background-repeat-space-7.html (在线测试) (源码)
- background-repeat-space-8.html (在线测试) (源码)
- background-repeat-space-9.html (在线测试) (源码)
- background-repeat-no-repeat.xht (在线测试) (源码)
- background-repeat-repeat-x.xht (在线测试) (源码)
- background-repeat-repeat-y.xht (在线测试) (源码)
- background-repeat-round-roundup.xht (在线测试) (源码)
- background-repeat-round.xht (在线测试) (源码)
- background-repeat-space.xht (在线测试) (源码)
- gradient-repeat-spaced-with-borders.html (在线测试) (源码)
- inheritance.sub.html (live test) (源码)
- background-repeat-computed.html (在线测试) (源码)
- background-repeat-invalid.html (在线测试) (源码)
- background-repeat-valid.html (在线测试) (源码)
- subpixel-repeat-no-repeat-mix.html (在线测试) (源码)
该简写属性用于设置background-repeat-x 和 background-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;
}
参见 § 3 多重背景图片分层,了解background-repeat 如何与其他逗号分隔的背景属性一起形成每一层背景图片。
是否应增加 'background-repeat: extend'?
2.5. 固定图片:background-attachment 属性
| 名称: | background-attachment |
|---|---|
| 值: | <attachment># |
| 初始值: | scroll |
| 适用元素: | 所有元素 |
| 可继承: | no |
| 百分比值: | N/A |
| 计算值: | 列表,每项为指定的关键字 |
| 规范顺序: | per grammar |
| 动画类型: | 离散 |
测试用例
- discrete-no-interpolation.html (在线测试) (源码)
- background-attachment-350.html (在线测试) (源码)
- background-attachment-353.html (在线测试) (源码)
- background-attachment-fixed-block-002.html (在线测试) (源码)
- background-attachment-fixed-border-radius-offset.html (在线测试) (源码)
- background-attachment-fixed-inline-002.html (在线测试) (源码)
- background-attachment-fixed-inline-scrolled.html (在线测试) (源码)
- background-attachment-fixed-inside-transform-1.html (在线测试) (源码)
- background-attachment-local-block-002.html (在线测试) (源码)
- background-attachment-local-hidden.html (在线测试) (源码)
- attachment-local-clipping-color-1.html (在线测试) (源码)
- attachment-local-clipping-color-2.html (在线测试) (源码)
- attachment-local-clipping-color-3.html (在线测试) (源码)
- attachment-local-clipping-color-4.html (在线测试) (源码)
- attachment-local-clipping-color-5.html (在线测试) (源码)
- attachment-local-clipping-color-6.html (在线测试) (源码)
- attachment-local-clipping-image-1.html (在线测试) (源码)
- attachment-local-clipping-image-2.html (在线测试) (源码)
- attachment-local-clipping-image-3.html (在线测试) (源码)
- attachment-local-clipping-image-4.html (在线测试) (源码)
- attachment-local-clipping-image-5.html (在线测试) (源码)
- attachment-local-clipping-image-6.html (在线测试) (源码)
- attachment-local-positioning-2.html (在线测试) (源码)
- attachment-local-positioning-3.html (在线测试) (源码)
- attachment-local-positioning-4.html (在线测试) (源码)
- attachment-local-positioning-5.html (在线测试) (源码)
- attachment-scroll-positioning-1.html (在线测试) (源码)
- background-attachment-margin-root-001.html (在线测试) (源码)
- background-attachment-margin-root-002.html (在线测试) (源码)
- inheritance.sub.html (live test) (源码)
- local-attachment-content-box-scroll.html (在线测试) (源码)
- background-attachment-computed.html (在线测试) (源码)
- background-attachment-invalid.html (在线测试) (源码)
- background-attachment-valid.html (在线测试) (源码)
- table-cell-background-local-002.html (在线测试) (源码)
- table-cell-background-local-003.html (在线测试) (源码)
- table-cell-background-local.html (在线测试) (源码)
如果指定了背景图片, 此属性用于指定它们是 相对于视口固定(fixed), 还是随盒子(scroll)或其内容(local)一起滚动。 此属性的值为逗号分隔的<attachment>关键字列表:
<attachment> = scroll | fixed | local
- 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-x、background-position-y、background-position-inline 和 background-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%的点与区域同样位置对齐。
background-position: 75% 50% 的示意图。 - <length>
- 长度值表示偏移的固定距离。例如,2cm 1cm 表示图片左上角放在定位区域左上角右移2cm、下移1cm的位置。
- top
- 若指定一或两个值,纵向为0%,否则指定下一个偏移的起点为上边缘。
- right
- 若指定一或两个值,横向为100%,否则指定下一个偏移的起点为右边缘。
- bottom
- 若指定一或两个值,纵向为100%,否则指定下一个偏移的起点为下边缘。
- left
- 若指定一或两个值,横向为0%,否则指定下一个偏移的起点为左边缘。
- center
- 横向未指定则为50%(left 50%), 否则纵向为50%(top 50%)。
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;
}
参见§ 3 多重背景图片分层,了解background-position如何与其它逗号分隔的背景属性协作, 组成每一层背景图片层。
2.7. 背景定位简写:background-position 简写属性
| 名称: | background-position |
|---|---|
| 值: | <bg-position># |
| 初始值: | 0% 0% |
| 适用元素: | 所有元素 |
| 可继承: | no |
| 百分比值: | 相对于背景定位区域的尺寸减去背景图片尺寸;见正文 |
| 计算值: | 列表,每项为一对自左上角起的(横、纵)偏移;每个偏移为一个计算后的<length-percentage>值 |
| 规范顺序: | per grammar |
| 动画类型: | 可重复列表 |
测试用例
- background-position-interpolation.html (在线测试) (源码)
- background-position-x-interpolation.html (在线测试) (源码)
- background-position-y-interpolation.html (在线测试) (源码)
- background-position-calc-minmax-001.html (在线测试) (源码)
- background-position-negative-percentage-comparison-002.html (在线测试) (源码)
- background-position-negative-percentage-comparison.html (在线测试) (源码)
- background-position-three-four-values.html (在线测试) (源码)
- background-position-xy-three-four-values-passthru.html (在线测试) (源码)
- background-position-bottom-right-repeat-round.html (在线测试) (源码)
- background-position-right-in-body.html (在线测试) (源码)
- inheritance.sub.html (live test) (源码)
- background-position-computed.html (在线测试) (源码)
- background-position-invalid.html (在线测试) (源码)
- background-position-valid.html (在线测试) (源码)
- background-position-x-computed.html (在线测试) (源码)
- background-position-x-invalid.html (在线测试) (源码)
- background-position-x-valid.html (在线测试) (源码)
- background-position-y-computed.html (在线测试) (源码)
- background-position-y-invalid.html (在线测试) (源码)
- background-position-y-valid.html (在线测试) (源码)
如果已经指定了背景图片, 本属性用于指定这些图片在其对应的背景定位区域内(在任何调整大小之后)的初始位置。
该属性是一个简写属性,可以在一次声明中同时设置 background-position-x、background-position-y、background-position-block 和 background-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 |
| 动画类型: | 可重复列表 |
测试用例
- discrete-no-interpolation.html (在线测试) (源码)
- background-clip-001.html (在线测试) (源码)
- background-clip-002.html (在线测试) (源码)
- background-clip-003.html (在线测试) (源码)
- background-clip-004.html (在线测试) (源码)
- background-clip-005.html (在线测试) (源码)
- background-clip-006.html (在线测试) (源码)
- background-clip-007.html (在线测试) (源码)
- background-clip-008.html (在线测试) (源码)
- background-clip-009.html (在线测试) (源码)
- background-clip-010.html (在线测试) (源码)
- background-clip-color-repaint.html (在线测试) (源码)
- background-clip-color.html (在线测试) (源码)
- background-clip-content-box-001.html (在线测试) (源码)
- background-clip-content-box-002.html (在线测试) (源码)
- background-clip-padding-box-001.html (在线测试) (源码)
- background-clip-padding-box-with-border-radius.html (在线测试) (源码)
- background-clip-content-box-with-border-radius-002.html (在线测试) (源码)
- background-clip-content-box-with-border-radius-003.html (在线测试) (源码)
- background-clip-padding-box-with-border-radius-002.html (在线测试) (源码)
- background-clip-padding-box-with-border-radius-003.html (在线测试) (源码)
- clip-border-area-background-geometry.html (在线测试) (源码)
- clip-border-area-border-on-top.html (在线测试) (源码)
- clip-border-area-border-image.html (在线测试) (源码)
- clip-border-area-box-decoration-break.html (在线测试) (源码)
- clip-border-area-multiple-backgrounds.html (在线测试) (源码)
- clip-border-area-on-body-not-propagated-to-root.html (在线测试) (源码)
- clip-border-area-on-body-propagated-to-root.html (在线测试) (源码)
- clip-border-area-on-root.html (在线测试) (源码)
- clip-border-area.html (在线测试) (源码)
- clip-rounded-corner.html (在线测试) (源码)
- clip-text-ellipsis.html (在线测试) (源码)
- clip-text-animated-text.html (在线测试) (源码)
- clip-text-dynamic-2.html (在线测试) (源码)
- clip-text-flex.html (在线测试) (源码)
- clip-text-multi-line.html (在线测试) (源码)
- clip-text-on-body-not-propagated-to-root.html (在线测试) (源码)
- clip-text-on-body-propagated-to-root.html (在线测试) (源码)
- clip-text-on-root.html (在线测试) (源码)
- clip-text-out-of-flow-child.html (在线测试) (源码)
- clip-text-text-decorations.html (在线测试) (源码)
- clip-text-text-emphasis.html (在线测试) (源码)
- background-clip_padding-box.html (在线测试) (源码)
- background-paint-order-001.html (在线测试) (源码)
- background-rounded-image-clip-001.html (在线测试) (源码)
- background-rounded-image-clip-002.html (在线测试) (源码)
- css3-background-clip-border-box.html (在线测试) (源码)
- css3-background-clip-content-box.html (在线测试) (源码)
- css3-background-clip-padding-box.html (在线测试) (源码)
- css3-background-clip.html (在线测试) (源码)
- inheritance.sub.html (live test) (源码)
- local-attachment-content-box-scroll.html (在线测试) (源码)
- background-clip-computed.html (在线测试) (源码)
- background-clip-invalid.html (在线测试) (源码)
- background-clip-valid.html (在线测试) (源码)
决定背景绘制区域, 即决定背景绘制在哪个区域内。 该属性的语法如下:
<bg-clip> = <visual-box> | [ border-area || text ]
或者是否应该专门定义 -webkit-background-clip 属性, 说明所有值都完全一致,仅此处额外增加了text值?
- <visual-box>
- 背景在指定的元素盒内(剪裁到该盒)绘制。
- text
- 背景在边框盒与文本几何的交集内绘制(并裁剪到该交集),该文本几何包括任何装饰以及元素及其流内和浮动后代中的着重符号。文本颜色不会影响背景的绘制。
- border-area
- 背景剪裁到边框绘制的区域, 会考虑border-width和border-style,但会忽略border-color引入的透明度。
如果同时指定了border-area 和 text, 则背景会在这两个区域的并集内(剪裁到该区域)绘制。
注意: 根元素的背景绘制区域不同,因此对其指定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 |
| 动画类型: | 可重复列表 |
测试用例
- discrete-no-interpolation.html (在线测试) (源码)
- background-position-origin-interpolation.html (在线测试) (源码)
- background-gradient-subpixel-fills-area.html (在线测试) (源码)
- background-origin-001.html (在线测试) (源码)
- background-origin-002.html (在线测试) (源码)
- background-origin-003.html (在线测试) (源码)
- background-origin-004.html (在线测试) (源码)
- background-origin-005.html (在线测试) (源码)
- background-origin-006.html (在线测试) (源码)
- background-origin-007.html (在线测试) (源码)
- background-origin-008.html (在线测试) (源码)
- origin-border-box.html (在线测试) (源码)
- origin-border-box_with_position.html (在线测试) (源码)
- origin-border-box_with_radius.html (在线测试) (源码)
- origin-border-box_with_size.html (在线测试) (源码)
- origin-content-box.html (在线测试) (源码)
- origin-content-box_with_position.html (在线测试) (源码)
- origin-content-box_with_radius.html (在线测试) (源码)
- origin-content-box_with_size.html (在线测试) (源码)
- origin-padding-box.html (在线测试) (源码)
- origin-padding-box_with_position.html (在线测试) (源码)
- origin-padding-box_with_radius.html (在线测试) (源码)
- origin-padding-box_with_size.html (在线测试) (源码)
- css3-background-origin-border-box.html (在线测试) (源码)
- css3-background-origin-content-box.html (在线测试) (源码)
- css3-background-origin-padding-box.html (在线测试) (源码)
- inheritance.sub.html (live test) (源码)
- background-origin-computed.html (在线测试) (源码)
- background-origin-invalid.html (在线测试) (源码)
- background-origin-valid.html (在线测试) (源码)
该属性决定背景定位区域: 即用于定位任何背景图片的区域。 对于被渲染为多个盒片段的元素 (如多行的内联盒、多页的盒), 此属性指定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-clip为padding-box, background-origin为border-box, background-position为top left (初始值), 且元素有非零边框时, 背景图片的上边和左边会被裁剪。
参见§ 3 多重背景图片分层,了解background-origin如何与其它逗号分隔的背景属性一起组成立每一层背景图片层。
2.10. 图片尺寸:background-size 属性
| 名称: | background-size |
|---|---|
| 值: | <bg-size># |
| 初始值: | auto |
| 适用元素: | 所有元素 |
| 可继承: | no |
| 百分比值: | 见正文 |
| 计算值: | 列表, 每项为一对尺寸(每个方向一个), 每项分别为关键字或计算值<length-percentage> |
| 规范顺序: | per grammar |
| 动画类型: | 可重复列表 |
测试用例
- background-size-interpolation.html (在线测试) (源码)
- background-size-001.html (在线测试) (源码)
- background-size-002.html (在线测试) (源码)
- background-size-005.html (在线测试) (源码)
- background-size-006.html (在线测试) (源码)
- background-size-007.html (在线测试) (源码)
- background-size-008.html (在线测试) (源码)
- background-size-009.html (在线测试) (源码)
- background-size-010.html (在线测试) (源码)
- background-size-011.html (在线测试) (源码)
- background-size-012.html (在线测试) (源码)
- background-size-013.html (在线测试) (源码)
- background-size-014.html (在线测试) (源码)
- background-size-015.html (在线测试) (源码)
- background-size-016.html (在线测试) (源码)
- background-size-017.html (在线测试) (源码)
- background-size-018.html (在线测试) (源码)
- background-size-019.html (在线测试) (源码)
- background-size-020.html (在线测试) (源码)
- background-size-021.html (在线测试) (源码)
- background-size-025.html (在线测试) (源码)
- background-size-026.html (在线测试) (源码)
- background-size-027.html (在线测试) (源码)
- background-size-028.html (在线测试) (源码)
- background-size-029.html (在线测试) (源码)
- background-size-030.html (在线测试) (源码)
- background-size-031.html (在线测试) (源码)
- background-size-034.html (在线测试) (源码)
- background-size-041.html (在线测试) (源码)
- background-size-042.html (在线测试) (源码)
- background-size-043.html (在线测试) (源码)
- background-size-044.html (在线测试) (源码)
- background-size-contain-001.html (在线测试) (源码)
- background-size-contain-002.html (在线测试) (源码)
- background-size-cover-001.html (在线测试) (源码)
- background-size-cover-002.html (在线测试) (源码)
- background-size-cover-003.html (在线测试) (源码)
- background-size-one-value-1x1-image.html (在线测试) (源码)
- background-size-percentage-root.html (在线测试) (源码)
- background-size-with-negative-value.html (在线测试) (源码)
- background-size-contain-svg-view.html (在线测试) (源码)
- background-size-contain.xht (在线测试) (源码)
- background-size-cover-contain-001.xht (在线测试) (源码)
- background-size-cover-contain-002.xht (在线测试) (源码)
- background-size-cover-svg-view.html (在线测试) (源码)
- background-size-cover-svg.html (在线测试) (源码)
- background-size-cover.xht (在线测试) (源码)
- background-size-near-zero-color.html (在线测试) (源码)
- background-size-near-zero-gradient.html (在线测试) (源码)
- background-size-near-zero-png.html (在线测试) (源码)
- background-size-near-zero-svg.html (在线测试) (源码)
- background-size-vector-001.html (在线测试) (源码)
- background-size-vector-002.html (在线测试) (源码)
- background-size-vector-003.html (在线测试) (源码)
- background-size-vector-004.html (在线测试) (源码)
- background-size-vector-005.html (在线测试) (源码)
- background-size-vector-006.html (在线测试) (源码)
- background-size-vector-007.html (在线测试) (源码)
- background-size-vector-008.html (在线测试) (源码)
- background-size-vector-009.html (在线测试) (源码)
- background-size-vector-010.html (在线测试) (源码)
- background-size-vector-011.html (在线测试) (源码)
- background-size-vector-012.html (在线测试) (源码)
- background-size-vector-013.html (在线测试) (源码)
- background-size-vector-014.html (在线测试) (源码)
- background-size-vector-015.html (在线测试) (源码)
- background-size-vector-016.html (在线测试) (源码)
- background-size-vector-017.html (在线测试) (源码)
- background-size-vector-018.html (在线测试) (源码)
- background-size-vector-019.html (在线测试) (源码)
- background-size-vector-020.html (在线测试) (源码)
- background-size-vector-021.html (在线测试) (源码)
- background-size-vector-022.html (在线测试) (源码)
- background-size-vector-023.html (在线测试) (源码)
- background-size-vector-024.html (在线测试) (源码)
- background-size-vector-025.html (在线测试) (源码)
- background-size-vector-026.html (在线测试) (源码)
- background-size-vector-027.html (在线测试) (源码)
- background-size-vector-028.html (在线测试) (源码)
- background-size-vector-029.html (在线测试) (源码)
- diagonal-percentage-vector-background.html (在线测试) (源码)
- tall--auto--omitted-width-percent-height.html (在线测试) (源码)
- tall--auto--percent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- tall--auto--percent-width-nonpercent-height.html (在线测试) (源码)
- tall--auto--percent-width-omitted-height-viewbox.html (在线测试) (源码)
- tall--auto--percent-width-omitted-height.html (在线测试) (源码)
- tall--auto--percent-width-percent-height-viewbox.html (在线测试) (源码)
- tall--auto--percent-width-percent-height.html (在线测试) (源码)
- tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- tall--auto-32px--nonpercent-width-nonpercent-height.html (在线测试) (源码)
- tall--auto-32px--nonpercent-width-omitted-height-viewbox.html (在线测试) (源码)
- tall--auto-32px--nonpercent-width-omitted-height.html (在线测试) (源码)
- tall--auto-32px--nonpercent-width-percent-height-viewbox.html (在线测试) (源码)
- tall--auto-32px--nonpercent-width-percent-height.html (在线测试) (源码)
- tall--auto-32px--omitted-width-nonpercent-height-viewbox.html (在线测试) (源码)
- tall--auto-32px--omitted-width-nonpercent-height.html (在线测试) (源码)
- tall--auto-32px--omitted-width-omitted-height-viewbox.html (在线测试) (源码)
- tall--auto-32px--omitted-width-omitted-height.html (在线测试) (源码)
- tall--auto-32px--omitted-width-percent-height-viewbox.html (在线测试) (源码)
- tall--auto-32px--omitted-width-percent-height.html (在线测试) (源码)
- tall--auto-32px--percent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- tall--auto-32px--percent-width-nonpercent-height.html (在线测试) (源码)
- tall--auto-32px--percent-width-omitted-height-viewbox.html (在线测试) (源码)
- tall--auto-32px--percent-width-omitted-height.html (在线测试) (源码)
- tall--auto-32px--percent-width-percent-height-viewbox.html (在线测试) (源码)
- tall--auto-32px--percent-width-percent-height.html (在线测试) (源码)
- tall--contain--height.html (在线测试) (源码)
- tall--contain--nonpercent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- tall--contain--nonpercent-width-nonpercent-height.html (在线测试) (源码)
- tall--contain--nonpercent-width-omitted-height-viewbox.html (在线测试) (源码)
- tall--contain--nonpercent-width-omitted-height.html (在线测试) (源码)
- tall--contain--nonpercent-width-percent-height-viewbox.html (在线测试) (源码)
- tall--contain--nonpercent-width-percent-height.html (在线测试) (源码)
- tall--contain--omitted-width-nonpercent-height-viewbox.html (在线测试) (源码)
- tall--contain--omitted-width-nonpercent-height.html (在线测试) (源码)
- tall--contain--omitted-width-omitted-height-viewbox.html (在线测试) (源码)
- tall--contain--omitted-width-omitted-height.html (在线测试) (源码)
- tall--contain--omitted-width-percent-height-viewbox.html (在线测试) (源码)
- tall--contain--omitted-width-percent-height.html (在线测试) (源码)
- tall--contain--percent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- tall--contain--percent-width-nonpercent-height.html (在线测试) (源码)
- tall--contain--percent-width-omitted-height-viewbox.html (在线测试) (源码)
- tall--contain--percent-width-omitted-height.html (在线测试) (源码)
- tall--contain--percent-width-percent-height-viewbox.html (在线测试) (源码)
- tall--contain--percent-width-percent-height.html (在线测试) (源码)
- tall--contain--width.html (在线测试) (源码)
- tall--cover--height.html (在线测试) (源码)
- tall--cover--nonpercent-width-nonpercent-height--crisp.html (在线测试) (源码)
- tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html (在线测试) (源码)
- tall--cover--nonpercent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- tall--cover--nonpercent-width-nonpercent-height.html (在线测试) (源码)
- tall--cover--nonpercent-width-omitted-height-viewbox.html (在线测试) (源码)
- tall--cover--nonpercent-width-omitted-height.html (在线测试) (源码)
- tall--cover--nonpercent-width-percent-height-viewbox.html (在线测试) (源码)
- tall--cover--nonpercent-width-percent-height.html (在线测试) (源码)
- tall--cover--omitted-width-nonpercent-height-viewbox.html (在线测试) (源码)
- tall--cover--omitted-width-nonpercent-height.html (在线测试) (源码)
- tall--cover--omitted-width-omitted-height-viewbox.html (在线测试) (源码)
- tall--cover--omitted-width-omitted-height.html (在线测试) (源码)
- tall--cover--omitted-width-percent-height-viewbox.html (在线测试) (源码)
- tall--cover--omitted-width-percent-height.html (在线测试) (源码)
- tall--cover--percent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- tall--cover--percent-width-nonpercent-height.html (在线测试) (源码)
- tall--cover--percent-width-omitted-height-viewbox.html (在线测试) (源码)
- tall--cover--percent-width-omitted-height.html (在线测试) (源码)
- tall--cover--percent-width-percent-height-viewbox.html (在线测试) (源码)
- tall--cover--percent-width-percent-height.html (在线测试) (源码)
- tall--cover--width.html (在线测试) (源码)
- wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--12px-auto--nonpercent-width-nonpercent-height.html (在线测试) (源码)
- wide--12px-auto--nonpercent-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--12px-auto--nonpercent-width-omitted-height.html (在线测试) (源码)
- wide--12px-auto--nonpercent-width-percent-height-viewbox.html (在线测试) (源码)
- wide--12px-auto--nonpercent-width-percent-height.html (在线测试) (源码)
- wide--12px-auto--omitted-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--12px-auto--omitted-width-nonpercent-height.html (在线测试) (源码)
- wide--12px-auto--omitted-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--12px-auto--omitted-width-omitted-height.html (在线测试) (源码)
- wide--12px-auto--omitted-width-percent-height-viewbox.html (在线测试) (源码)
- wide--12px-auto--omitted-width-percent-height.html (在线测试) (源码)
- wide--12px-auto--percent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--12px-auto--percent-width-nonpercent-height.html (在线测试) (源码)
- wide--12px-auto--percent-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--12px-auto--percent-width-omitted-height.html (在线测试) (源码)
- wide--12px-auto--percent-width-percent-height-viewbox.html (在线测试) (源码)
- wide--12px-auto--percent-width-percent-height.html (在线测试) (源码)
- wide--auto--nonpercent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--auto--nonpercent-width-nonpercent-height.html (在线测试) (源码)
- wide--auto--nonpercent-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--auto--nonpercent-width-omitted-height.html (在线测试) (源码)
- wide--auto--nonpercent-width-percent-height-viewbox.html (在线测试) (源码)
- wide--auto--nonpercent-width-percent-height.html (在线测试) (源码)
- wide--auto--omitted-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--auto--omitted-width-nonpercent-height.html (在线测试) (源码)
- wide--auto--omitted-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--auto--omitted-width-omitted-height.html (在线测试) (源码)
- wide--auto--omitted-width-percent-height-viewbox.html (在线测试) (源码)
- wide--auto--omitted-width-percent-height.html (在线测试) (源码)
- wide--auto--percent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--auto--percent-width-nonpercent-height.html (在线测试) (源码)
- wide--auto--percent-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--auto--percent-width-omitted-height.html (在线测试) (源码)
- wide--auto--percent-width-percent-height-viewbox.html (在线测试) (源码)
- wide--auto--percent-width-percent-height.html (在线测试) (源码)
- wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--auto-32px--nonpercent-width-nonpercent-height.html (在线测试) (源码)
- wide--auto-32px--nonpercent-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--auto-32px--nonpercent-width-omitted-height.html (在线测试) (源码)
- wide--auto-32px--nonpercent-width-percent-height-viewbox.html (在线测试) (源码)
- wide--auto-32px--nonpercent-width-percent-height.html (在线测试) (源码)
- wide--auto-32px--omitted-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--auto-32px--omitted-width-nonpercent-height.html (在线测试) (源码)
- wide--auto-32px--omitted-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--auto-32px--omitted-width-omitted-height.html (在线测试) (源码)
- wide--auto-32px--omitted-width-percent-height-viewbox.html (在线测试) (源码)
- wide--auto-32px--omitted-width-percent-height.html (在线测试) (源码)
- wide--auto-32px--percent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--auto-32px--percent-width-nonpercent-height.html (在线测试) (源码)
- wide--auto-32px--percent-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--auto-32px--percent-width-omitted-height.html (在线测试) (源码)
- wide--auto-32px--percent-width-percent-height-viewbox.html (在线测试) (源码)
- wide--auto-32px--percent-width-percent-height.html (在线测试) (源码)
- wide--contain--height.html (在线测试) (源码)
- wide--contain--nonpercent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--contain--nonpercent-width-nonpercent-height.html (在线测试) (源码)
- wide--contain--nonpercent-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--contain--nonpercent-width-omitted-height.html (在线测试) (源码)
- wide--contain--nonpercent-width-percent-height-viewbox.html (在线测试) (源码)
- wide--contain--nonpercent-width-percent-height.html (在线测试) (源码)
- wide--contain--omitted-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--contain--omitted-width-nonpercent-height.html (在线测试) (源码)
- wide--contain--omitted-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--contain--omitted-width-omitted-height.html (在线测试) (源码)
- wide--contain--omitted-width-percent-height-viewbox.html (在线测试) (源码)
- wide--contain--omitted-width-percent-height.html (在线测试) (源码)
- wide--contain--percent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--contain--percent-width-nonpercent-height.html (在线测试) (源码)
- wide--contain--percent-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--contain--percent-width-omitted-height.html (在线测试) (源码)
- wide--contain--percent-width-percent-height-viewbox.html (在线测试) (源码)
- wide--contain--percent-width-percent-height.html (在线测试) (源码)
- wide--contain--width.html (在线测试) (源码)
- wide--cover--height.html (在线测试) (源码)
- wide--cover--nonpercent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--cover--nonpercent-width-nonpercent-height.html (在线测试) (源码)
- wide--cover--nonpercent-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--cover--nonpercent-width-omitted-height.html (在线测试) (源码)
- wide--cover--nonpercent-width-percent-height-viewbox.html (在线测试) (源码)
- wide--cover--nonpercent-width-percent-height.html (在线测试) (源码)
- wide--cover--omitted-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--cover--omitted-width-nonpercent-height.html (在线测试) (源码)
- wide--cover--omitted-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--cover--omitted-width-omitted-height.html (在线测试) (源码)
- wide--cover--omitted-width-percent-height-viewbox.html (在线测试) (源码)
- wide--cover--omitted-width-percent-height.html (在线测试) (源码)
- wide--cover--percent-width-nonpercent-height-viewbox.html (在线测试) (源码)
- wide--cover--percent-width-nonpercent-height.html (在线测试) (源码)
- wide--cover--percent-width-omitted-height-viewbox.html (在线测试) (源码)
- wide--cover--percent-width-omitted-height.html (在线测试) (源码)
- wide--cover--percent-width-percent-height-viewbox.html (在线测试) (源码)
- wide--cover--percent-width-percent-height.html (在线测试) (源码)
- wide--cover--width.html (在线测试) (源码)
- zero-height-ratio-5px-auto.html (在线测试) (源码)
- zero-height-ratio-auto-5px.html (在线测试) (源码)
- zero-height-ratio-auto-auto.html (在线测试) (源码)
- zero-height-ratio-contain.html (在线测试) (源码)
- zero-height-ratio-cover.html (在线测试) (源码)
- zero-ratio-no-dimensions-5px-auto.html (在线测试) (源码)
- zero-ratio-no-dimensions-auto-5px.html (在线测试) (源码)
- zero-ratio-no-dimensions-auto-auto.html (在线测试) (源码)
- zero-ratio-no-dimensions-contain.html (在线测试) (源码)
- zero-ratio-no-dimensions-cover.html (在线测试) (源码)
- zero-width-ratio-5px-auto.html (在线测试) (源码)
- zero-width-ratio-auto-5px.html (在线测试) (源码)
- zero-width-ratio-auto-auto.html (在线测试) (源码)
- zero-width-ratio-contain.html (在线测试) (源码)
- zero-width-ratio-cover.html (在线测试) (源码)
- css3-background-size-001.html (在线测试) (源码)
- css3-background-size-contain.html (在线测试) (源码)
- css3-background-size.html (在线测试) (源码)
- inheritance.sub.html (live test) (源码)
- subpixel-repeat-no-repeat-mix.html (在线测试) (源码)
- background-size-computed.html (在线测试) (源码)
- background-size-invalid.html (在线测试) (源码)
- background-size-valid.html (在线测试) (源码)
该属性指定每个背景图片的尺寸。 属性值为逗号分隔的<bg-size>值,其中
<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain
各个值的意义如下:
- contain
- 在保持图片自然宽高比(如有)的同时,将图片缩放到最大,使其宽高都能完全适配在背景定位区域内。
- cover
- 保持图片自然宽高比(如有)不变,将其缩放到最小尺寸以完全覆盖背景定位区域。
- [ <length-percentage [0,∞]> | auto ]{1,2}
-
第一个值指定对应图片的宽度,第二个值指定高度。
若只给一个值,第二个视为auto。
若某一方向值为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。
p{ background-color : green; } p{ background-tbd : url ( a.png ) top left, url ( b.png ) top left no-repeat; }
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-331.html (live test) (源码)
- background-332.html (live test) (源码)
- background-333.html (live test) (源码)
- background-334.html (live test) (源码)
- background-335.html (live test) (源码)
- background-336.html (live test) (源码)
- background-computed.html (在线测试) (源码)
- background-invalid.html (在线测试) (源码)
- background-shorthand-serialization.html (在线测试) (源码)
- background-valid.html (在线测试) (源码)
background 属性是一个简写属性,可在样式表的同一位置设置大多数背景属性。 逗号分隔的项数决定了背景图片层的数量。 在一条合法声明中,对于每一层, 简写属性首先将background-image、background-position、background-size、background-repeat、background-origin、background-clip 和 background-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-origin 和 background-clip 为此值; 但如果设置了只适用于 background-clip 的值,则 background-clip 使用该值,background-origin 为 border-box。 如果有两个 <visual-box> 值, 则第一个赋给 background-origin,第二个赋给 background-clip。
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);
}
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-origin 和 background-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: none, canvas 背景即为透明。
如果canvas 背景不透明, 下方的canvas 表面会显示出来。 canvas surface 的纹理由UA决定 (一般为不透明白色)。
4.1. 画布背景与根元素
根元素的背景成了canvas 背景,其背景绘制区域 会扩展覆盖整个canvas。 但所有图片的尺寸与定位均相对于根元素盒计算, 就如仅为该元素作画一样。 (也就是说,背景定位区域同根元素一致。) 根元素不会再次绘制背景, 即其背景的实际值为transparent。
测试用例
4.2. 画布背景与 HTML <body> 元素
对于其根元素为
HTML HTML 元素
或 XHTML html 元素 [HTML] 的文档:
如果background-image 在根元素上的计算值为 none,且其 background-color 为 transparent,
用户代理必须改为从该元素的第一个
HTML BODY 或 XHTML body 子元素
传播这些背景属性的 计算值。
该 BODY 元素的背景属性的 使用值
为它们的 初始值,
且传播得到的属性值视为指定在根元素上一样处理。
推荐 HTML 文档作者通过 BODY 元素
而非 HTML 元素来指定画布背景。
注意: 使用 containment(封装)
会禁用对 HTML
body
元素的这种特殊处理。
详情参见 CSS Containment 1 § 2
强封装:contain 属性。
<!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] 起的新增内容
-
将 background-position 改为简写,并新增物理与逻辑长属性
-
为 <bg-position> 添加了逻辑关键字
-
为 background-clip 添加了 border-area 和 text 值
-
新增 background-repeat-* 长属性
-
为 background-repeat 添加了逻辑关键字 repeat-block 和 repeat-inline
6. 致谢
除了本模块前身 [CSS1]、[CSS2] 及 [CSS3BG] 的众多贡献者外, 编辑们还要特别感谢 Tab Atkins、 以及 Håkon Wium Lie 针对 Level 4 的建议与反馈。
隐私注意事项
当前尚未有关于本规范的新隐私注意事项报告。
安全性注意事项
当前尚未有关于本规范的新安全性注意事项报告。