mozilla

background

摘要

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

background 将指定的背景属性设为特定值;没有指定的背景属性为默认值。

  • 初始值 the concatenation of the initial values of its longhand properties:
    • background-image: none
    • background-position: 0% 0%
    • background-size: auto auto
    • background-repeat: repeat
    • background-origin: padding-box
    • background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • background-clip: border-box
    • background-color: transparent
  • 适用元素 all elements. It also applies to ::first-letter and ::first-line.
  • 是否是继承属性 no
  • Percentages The values of its longhand properties the percentage value belongs to:
    • 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, with lengths made absolute
    • 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: no
    • background-clip: no
    • 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: no
    • background-attachment: no
  • 正规顺序 order of appearance in the formal grammar of the values

Syntax

Formal syntax: [ <bg-layer> , ]* <final-bg-layer>
            
Note:  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> || <box> and <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <background-color>

举例

查看示例

body { 
  background: red; 
}

.topbanner { 
  background: url("topbanner.png") #00D repeat-y fixed; 
}

规范

规范 状态 注释
CSS Backgrounds and Borders Module Level 3
background
Candidate Recommendation The shorthand property has been extended to support multiple backgrounds and the new background-size and background-clip properties.
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) 未实现

其他参考

文档标签和贡献者

标签: 
向此页面作出贡献: Yuichiro, ethertank, Mgjbot, Mickeyboy, Steekid, yan, zldream1106
最后编辑者: zldream1106,