MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

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-style: is itself a shorthand, applies to the same elements as each of its longhand properties.
      • background-clip: 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).
    • 可动画 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
    • Canonical order 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) 未实现

    其他参考

    文档标签和贡献者

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