背景 - CSS：层叠样式表

背景background 简写 CSS 属性一次设置所有背景样式属性，例如颜色、图像、原点和大小，或重复方法。在 background 简写属性值声明中未设置的组件属性将设置为其默认值。

试试看组成属性此属性是以下 CSS 属性的简写

background-attachment

background-clip

background-color

background-image

background-origin

background-position

background-repeat

background-size

语法css/* Using a */

background: green;

/* Using a and */

background: url("test.jpg") repeat-y;

/* Using a and */

background: border-box red;

/* A single image, centered and scaled */

background: no-repeat center/80% url("../img/image.png");

/* Global values */

background: inherit;

background: initial;

background: revert;

background: revert-layer;

background: unset;

background 属性指定为一个或多个背景层，用逗号分隔。

每一层的语法如下

每一层可以包含以下值的零个或一个实例

值只能包含在 之后，用 '/' 字符分隔，如下所示："center/80%"。

值可以包含零次、一次或两次。如果包含一次，则设置 background-origin 和 background-clip。如果包含两次，则第一个实例设置 background-origin，第二个实例设置 background-clip。

值只能包含在指定的最后一层中。

值

参见 background-attachment。默认值：scroll。

参见 background-clip 和 background-origin。默认值：分别为 border-box 和 padding-box。

参见 background-color。默认值：transparent。

参见 background-image。默认值：none。

参见 background-position。默认值：0% 0%。

参见 background-repeat。默认值：repeat。

参见 background-size。默认值：auto。

以下三行 CSS 等效

cssbackground: none;

background: transparent;

background: repeat scroll 0% 0% / auto padding-box border-box none transparent;

正式定义初始值作为简写中的每个属性background-image: nonebackground-position: 0% 0%background-size: auto autobackground-repeat: repeatbackground-origin: padding-boxbackground-clip: border-boxbackground-attachment: scrollbackground-color: transparent应用于所有元素。它也应用于 ::first-letter 和 ::first-line。继承否百分比作为简写中的每个属性background-position: 参考背景定位区域的大小减去背景图像的大小；大小指的是水平偏移的宽度和垂直偏移的高度background-size: 相对于背景定位区域计算值作为简写中的每个属性background-image: 按指定方式，但使用 url() 值使其成为绝对值background-position: 作为简写中的每个属性background-position-x: 列表，每个项目由以下组成：作为绝对长度和百分比组合给出的偏移量，加上原点关键字background-position-y: 列表，每个项目由以下组成：作为绝对长度和百分比组合给出的偏移量，加上原点关键字background-size: 按指定方式，但将相对长度转换为绝对长度

background-repeat：一个列表，每个项目包含两个关键字，每个维度一个background-origin：按指定方式background-clip：按指定方式background-attachment：按指定方式background-color：计算出的颜色动画类型作为简写中的每个属性background-color：一个 颜色background-image：离散的background-clip：一个可重复的列表background-position：一个可重复的列表background-size：一个可重复的列表background-repeat：离散的background-attachment：离散的正式语法background = #? , = || [ / ]? || || || || = || [ / ]? || || || || || <'background-color'> = | none = [ left | center | right | top | bottom | ] | [ left | center | right | ] [ top | center | bottom | ] | [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ] = [ | auto ]{1,2} | cover | contain = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} = scroll | fixed | local = content-box | padding-box | border-box = = | = | = | = url( * ) | = src( * ) 无障碍访问浏览器不会向辅助技术提供任何关于背景图像的特殊信息。这主要对屏幕阅读器很重要，因为屏幕阅读器不会宣布其存在，因此不会向其用户传达任何信息。如果图像包含理解页面总体目的的关键信息，最好在文档中以语义方式描述它。

MDN 理解 WCAG，指南 1.1 说明

理解成功标准 1.1.1 | W3C 理解 WCAG 2.0

示例使用颜色关键字和图像设置背景HTML

html

Starry sky

Twinkle twinkle

Starry sky

Here is a paragraph

CSS

css.warning {

background: pink;

}

.topbanner {

background: url("starsolid.gif") #99f repeat-y fixed;

}

结果规范规范CSS 背景和边框模块级别 3 # the-background浏览器兼容性BCD 表格仅在浏览器中加载

另请参阅

box-decoration-break

使用渐变

使用多个背景