background

在此页

组成特性
句法
可访问性关注
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

background 简写 CSS 特性一次性设置所有背景样式特性，譬如：颜色、图像、原点、大小或重复方法。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

组成特性

此特性是下列 CSS 特性的简写：

句法

/* 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 property is specified as one or more background layers, separated by commas.

The syntax of each layer is as follows:

Each layer may include zero or one occurrences of any of the following values:
- <attachment>
- <bg-image>
- <position>
- <bg-size>
- <repeat-style>
<bg-size> value may only be included immediately after <position> , separated with the '/' character, like this: " center/80% ".
<box> value may be included zero, one, or two times. If included once, it sets both background-origin and background-clip . If it is included twice, the first occurrence sets background-origin , and the second sets background-clip .
<background-color> value may only be included in the last layer specified.

值

<attachment>: 见 background-attachment
<box>: 见 background-clip and background-origin
<background-color>: 见 background-color
<bg-image>: 见 background-image
<position>: 见 background-position
<repeat-style>: 见 background-repeat
<bg-size>: 见 background-size .

可访问性关注

Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

形式定义

初始值	as each of the properties of the shorthand: `background-image` : `none` `background-position` : `0% 0%` `background-size` : `auto auto` `background-repeat` : `repeat` `background-origin` : `padding-box` `background-clip` : `border-box` `background-attachment` : `scroll` `background-color` : `transparent`
适用于	所有元素。它还适用于 `::first-letter` and `::first-line` .
继承	no
百分比	as 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
计算值	as each of the properties of the shorthand: `background-image` : as specified, but with `<url>` values 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` ：如指定 `background-clip` ：如指定 `background-attachment` ：如指定 `background-color` ：计算颜色
动画类型	as each of the properties of the shorthand: `background-color` : a color `background-image` : discrete `background-clip` : discrete `background-position` : repeatable list of simple list of length, percentage, or calc `background-size` : repeatable list of simple list of length, percentage, or calc `background-repeat` : discrete `background-attachment` : discrete

形式句法

[ <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()> | <paint()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>
where 
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<paint()> = paint( <ident>, <declaration-value>? )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>
where 
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<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> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-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> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<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> ] ]
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
where 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>
where 
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <percentage>

范例

Setting backgrounds with color keywords and images

HTML

<p class="topbanner">
  Starry sky<br/>
  Twinkle twinkle<br/>
  Starry sky
</p>
<p class="warning">Here is a paragraph<p>

CSS

.warning {
  background: pink;
}
.topbanner {
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
}

结果

规范

规范	状态	注释
CSS Backgrounds and Borders Module Level 3 The definition of 'background' in that specification.	候选推荐	The shorthand property has been extended to support multiple backgrounds and the new `background-size` , `background-origin` and `background-clip` 特性。
CSS Level 2 (Revision 1) The definition of 'background' in that specification.	推荐	No significant changes
CSS Level 1 The definition of 'background' in that specification.	推荐	初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`background`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4	Opera 完整支持 3.5	Safari 完整支持 1	WebView Android 完整支持 2	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
SVG image as background	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 4	IE 完整支持 9	Opera 完整支持 9.5	Safari 完整支持 3.1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
Values of `background-clip` longhand	Chrome 完整支持 21	Edge 完整支持 12	Firefox 完整支持 22	IE 完整支持 9	Opera 完整支持 15	Safari 完整支持 5.1	WebView Android 完整支持 3	Chrome Android 完整支持 25	Firefox Android 完整支持 22	Opera Android 完整支持 14	Safari iOS 完整支持 4	Samsung Internet Android 完整支持 1.5
Values of `background-origin` longhand	Chrome 完整支持 21	Edge 完整支持 12	Firefox 完整支持 22	IE 完整支持 9	Opera 完整支持 15	Safari 完整支持 5.1	WebView Android 完整支持 3	Chrome Android 完整支持 25	Firefox Android 完整支持 22	Opera Android 完整支持 14	Safari iOS 完整支持 4	Samsung Internet Android 完整支持 1.5
Values of `background-size` longhand	Chrome 完整支持 21	Edge 完整支持 12	Firefox 完整支持 9	IE 完整支持 9	Opera 完整支持 21	Safari 完整支持 5.1	WebView Android 完整支持 3	Chrome Android 完整支持 25	Firefox Android 完整支持 18	Opera Android 完整支持 14	Safari iOS 完整支持 4	Samsung Internet Android 完整支持 1.5
Multiple backgrounds	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 3.6	IE 完整支持 9	Opera 完整支持 10.5	Safari 完整支持 1.3	WebView Android 完整支持 2	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

在此页