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

概述

CSS background-image 属性用于为一个元素设置一个或者多个背景图像。图像在绘制时,以z方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像最接近用户。

然后元素的 borders 会在它们之上被绘制,而background-color会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系,需要在CSS属性{cssxref("background-clip")}} 和 background-origin  中定义。

如果一个指定的图像无法被绘制 (比如,设定的URI所表示的文件无法被加载),浏览器会将此情况等同于其值被设为none。

Note: 即使图像是不透明的,背景色在通常情况下并不会被显示,web开发者仍然应该指定background-color属性。如果图像无法被加载—例如,在网络连接断开的情况下—背景色就会被绘制。

初始值none
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性
适用媒体visual
计算值as specified, but with URIs made absolute
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

background-image: none;
background-image: url(http://www.example.com/bck.png);

background-image: inherit;
 
 
 
 

取值

 
none
是一个表示无背景图的关键字。
<image>
Is an <image> denoting the image to display. There can be several of them, separated by commas, as multiple backgrounds are supported.

正规语法

<bg-image>#

where
<bg-image> = none | <image>

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}
<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>? ]]

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

例子

Multiple backgrounds and transparency

Note that the star image is partially transparent and is layered over the cat image.

HTML 内容

<div>
    <p class="catsandstars">
        This paragraph is full of cats<br />and stars.
    </p>
    <p>This paragraph is not.</p>
    <p class="catsandstars">
        Here are more cats for you.<br />Look at them!
    </p>
    <p>And no more.</p>
</div>
 
 
 
 
 
 
 
 
 
 

CSS 内容

pre, p {
    font-size: 1.5em;
    color: #FE7F88;
    background-color: transparent;
}

div {
  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

规范

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
background-image
Candidate Recommendation From CSS2 Revision 1, the property has been extended to support multiple backgrounds and any <image> CSS data type.
CSS Level 2 (Revision 1)
background-image
Recommendation From CSS1, the way images with and without intrinsic dimensions are handled is now described.
CSS Level 1
background-image
Recommendation  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier)[1] 4.0 3.5 1.0
Multiple backgrounds 1.0 3.6 (1.9.2) 9.0 yes 1.3
Gradients 1.0-webkit 3.6 (1.9.2)-moz 10 11+-o 4.0-webkit
SVG images 8.0 4.0 (2.0) 9.0 9.5 5.0 [2]
element ? (Yes)-moz 未实现 未实现 未实现
image-rect 未实现 (Yes)-moz 未实现 未实现 未实现
Any <image> value. ? 未实现 ? ? ?
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support yes yes yes yes
Multiple backgrounds yes yes yes yes
Gradients yes -webkit
old webkit syntax for iOS 4.2 and older
? ? yes-webkit
old webkit syntax
SVG images yes [2] yes yes 未实现
element (Yes)-moz ? ? ?
image-rect (Yes)-moz 未实现 未实现 未实现
Any <image> value 未实现 ? ? ?

[1] If the browser.display.use_document_colors user preference in about:config is set to false, background images will not de displayed.

[2] Support of SVG in CSS background is incomplete in the current version of iOS Safari (5.0). The same for Safari prior 5.0.

提示

开发人员应当在给元素设定背景图的同时给元素指定背景色background-color,当背景图不可用时背景色替代。

参见

文档标签和贡献者

 最后编辑者: dche,