这篇翻译不完整。请帮忙从英语翻译这篇文章

background 是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括 color, image, origin 与 size, repeat 方式等等。

此属性是一个 简写属性,可以在一次声明中定义一个或多个属性:background-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-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 属性被指定多个背景层时,使用逗号分隔每个背景层。

每一层的语法如下:

注意:  background-color 只能在background的最后一个属性上定义,因为整个元素只有一种背景颜色。

下面的一个或多个值,可以按任意顺序放置:

<attachment>
参见 background-attachment
<box>
参见 background-clipbackground-origin
<background-color>
参见 background-color
<bg-image>
参见 background-image
<position>
参见 background-position
<repeat-style>
参见 background-repeat
<bg-size>
参见 background-size

标准语法

[ <bg-layer> , ]* <final-bg-layer>

where
<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>

where
<bg-image> = none | <image>
<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> | 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

where
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>

where
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?

示例

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-sizebackground-originbackground-clip 等新属性。
CSS Level 2 (Revision 1)
background
Recommendation 无重大修改
CSS Level 1
background
Recommendation 初始定义

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support 2Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 5Safari iOS Full support 3.2Samsung Internet Android Full support Yes
Multiple backgroundsChrome Full support 1Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support 10.5Safari Full support 1.3WebView Android Full support 2Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android ? Safari iOS Full support 3.2Samsung Internet Android Full support Yes
SVG image as backgroundChrome Full support 31Edge Full support 12Firefox Full support 9IE Full support 9Opera Full support 21Safari Full support 5.1WebView Android Full support 3Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support 4.2Samsung Internet Android ?
Values of background-size longhandChrome Full support 21Edge Full support 12Firefox Full support 9IE Full support 9Opera Full support 21Safari Full support 5.1WebView Android Full support 3Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 18Opera Android Full support YesSafari iOS Full support 4Samsung Internet Android Full support Yes
Values of background-origin longhandChrome Full support 21Edge Full support 12Firefox Full support 22IE Full support 9Opera Full support 21Safari Full support 5.1WebView Android Full support 3Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 22Opera Android No support NoSafari iOS Full support 4Samsung Internet Android ?
Values of background-clip longhandChrome Full support 21Edge Full support 12Firefox Full support 22IE Full support 9Opera Full support 21Safari Full support 5.1WebView Android Full support 3Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 22Opera Android No support NoSafari iOS Full support 4Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

参见

文档标签和贡献者

最后编辑者: Bob_Liu,