background
尝试一下
background
是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括 color, image, origin 与 size, repeat 方式等等。
此属性是一个 简写属性,可以在一次声明中定义一个或多个属性:background-clip
、background-color
、background-image
、background-origin
、background-position
、background-repeat
、background-size
,和 background-attachment
。
对于所有简写属性,任何没有被指定的值都会被设定为它们的 初始值。
语法
/* 使用 <background-color> */
background: green;
/* 使用 <bg-image> 和 <repeat-style> */
background: url("test.jpg") repeat-y;
/* 使用 <box> 和 <background-color> */
background: border-box red;
/* 将背景设为一张居中放大的图片 */
background: no-repeat center/80% url("../img/image.png");
background
属性被指定多个背景层时,使用逗号分隔每个背景层。
每一层的语法如下:
- 在每一层中,下列的值可以出现 0 次或 1 次:
<bg-size>
只能紧接着<position>
出现,以"/"分割,如: "center/80%
".<box>
可能出现 0 次、1 次或 2 次。如果出现 1 次,它同时设定background-origin
和background-clip
。如果出现 2 次,第一次的出现设置background-origin
,第二次的出现设置background-clip
。<background-color>
只能被包含在最后一层。
注意:
background-color
只能在 background 的最后一个属性上定义,因为整个元素只有一种背景颜色。值
下面的一个或多个值,可以按任意顺序放置:
- ">
<attachment>
- 参见
background-attachment
- ">
<box>
- 参见
background-clip
和background-origin
- ">
<background-color>
- 参见
background-color
- ">
<bg-image>
- 参见
background-image
- ">
<position>
- 参见
background-position
- ">
<repeat-style>
- 参见
background-repeat
- ">
<bg-size>
- 参见
background-size
。
标准语法
background =
[ <bg-layer># , ]? <final-bg-layer>
<bg-layer> =
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<box> ||
<box>
<final-bg-layer> =
<'background-color'> ||
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<box> ||
<box>
<bg-image> =
<image> |
none
<bg-position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]
<bg-size> =
[ <length-percentage [0,∞]> | auto ]{1,2} |
cover |
contain
<repeat-style> =
repeat-x |
repeat-y |
[ repeat | space | round | no-repeat ]{1,2}
<attachment> =
scroll |
fixed |
local
<box> =
border-box |
padding-box |
content-box
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<length-percentage> =
<length> |
<percentage>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<gradient> =
<linear-gradient()> |
<repeating-linear-gradient()> (en-US) |
<radial-gradient()> |
<repeating-radial-gradient()> (en-US)
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<color> =
<absolute-color-base> |
currentcolor |
<system-color> |
<device-cmyk()>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]
<cf-image> =
<percentage>? &&
[ <image> | <color> ]
<id-selector> =
<hash-token>
<linear-gradient()> =
linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> =
radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<absolute-color-base> =
<hex-color> (en-US) |
<named-color> |
transparent |
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>
<device-cmyk()> =
device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )
<side-or-corner> =
[ left | right ] ||
[ top | bottom ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<position> =
[ left | center | right | top | bottom | start | end | <length-percentage> ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ] |
[ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ]
<rgb()> =
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> =
hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> =
color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<cmyk-component> =
<number> |
<percentage>
<alpha-value> =
<number> |
<percentage>
<linear-color-stop> =
<color> &&
<length-percentage>?
<linear-color-hint> =
<length-percentage>
<hue> =
<number> |
<angle> |
none
<colorspace-params> =
<predefined-rgb-params> |
<xyz-params>
<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> =
<xyz-space> [ <number> | none ]{3}
<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
<xyz-space> =
xyz |
xyz-d50 |
xyz-d65
示例
HTML
<p class="topbanner">
Starry sky<br/>
Twinkle twinkle<br/>
Starry sky
</p>
<p class="warning">Here is a paragraph<p>
CSS
.warning {
background: red;
}
.topbanner {
background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
}
结果
规范
规范 | 状态 | 注释 |
---|---|---|
CSS Backgrounds and Borders Module Level 3 background |
Candidate Recommendation | 此简写属性已经扩展出了多重背景和诸如 background-size ,background-origin 与 background-clip 等新属性。 |
CSS Level 2 (Revision 1) background |
Recommendation | 无重大修改 |
CSS Level 1 background |
Recommendation | 初始定义 |
浏览器兼容性
BCD tables only load in the browser