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

摘要

background 是CSS简写属性,用来集中设置各种背景属性。background 可以用来设置一个或多个属性:background-color, background-image, background-position, background-repeat, background-size, background-attachment

background 将指定的背景属性设为明确给定的值,将没有指定的背景属性设为初始值。

初始值as each of the properties of the shorthand:
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性
Percentagesas each of the properties of the shorthand:
  • background-position: refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
  • background-size: relative to the background positioning area
适用媒体visual
计算值as each of the properties of the shorthand:
  • background-image: as specified, but with URIs made absolute
  • background-position: a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a length), otherwise as a percentage
  • background-size: as specified, but with relative lengths converted into absolute lengths
  • background-repeat: a list, each item consisting of two keywords, one per dimension
  • background-origin: as specified
  • background-clip: as specified
  • background-attachment: as specified
  • background-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
是否适用于 CSS 动画as each of the properties of the shorthand:
  • background-color: yes, as a color
  • background-image: 否
  • background-clip: 否
  • background-position: yes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • background-size: yes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. . This means keyword values are not animatable.
  • background-repeat: 否
  • background-attachment: 否
正规顺序order of appearance in the formal grammar of the values

语法

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");
注意:  background-color 只能在最后一个background定义,因为整个元素只有一种背景颜色。

属性包括以下几种,可以以任意顺序放置:

<attachment>
参看 background-attachment
<box>
参看 background-clip
<background-color>
参看 background-color
<bg-image>
参看 background-image
<position>
See background-position
<repeat-style>
参看 background-repeat
<bg-size>
参看 background-size. 这个属性的定义必须在 <position> 之后, 并使用 '/' 符号分隔。

标准语法 

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

where
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

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

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>
<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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<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}

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> [ <percentage> | <length> ]?

实例

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") #00D repeat-y fixed; 
}

结果

规范

规范 状态 注释
CSS Backgrounds and Borders Module Level 3
background
Candidate Recommendation 简写属性已经扩展了多重背景和如 background-sizebackground-origin 以及 background-clip的新属性
CSS Level 2 (Revision 1)
background
Recommendation 无重大修改
CSS Level 1
background
Recommendation 初始定义

浏览器兼容

特性 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基础特性支持 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0
多背景 3.6 (1.9.2) 1.0 9.0 10.5 1.3
SVG图片背景 4.0 (2.0) (Yes) 9.0 # (Yes) (Yes)
 background-size支持 18.0 (18.0) 21.0 # 9.0 (Yes) 未实现
特性 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基础特性支持 1.0 (1.9.2) 2.1 ? 10.0 3.2
多背景 1.0 (1.9.2) 2.1 ? 10.0 3.2
SVG图片背景 4.0 (2.0) ? ? ? ?
 background-size支持 18.0 (18.0) 未实现 (Yes) (Yes) 未实现

其他参考

文档标签和贡献者

标签: 
 最后编辑者: kevinfszu,