background-image
CSS属性的元件上设置一个或多个背景图像。
/* Single value */ background-image: url('https://example.com/bck.png'); /* Multiple values */ background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png'); /* Keyword value */ background-image: none; /* Global values */ background-image: inherit; background-image: initial; background-image: unset;
背景图像在堆叠上下文层上绘制。指定的第一个图层被绘制为与用户最接近。
元素的边界然后被绘制在它们的顶部,然后被background-color
绘制在它们下面。如何绘制图像相对于框和它的边界由background-clip
和background-origin
CSS属性定义。
如果无法绘制指定的图像(例如,无法加载指定的URI所指示的文件),那么浏览器会像处理none
值一样处理它。
注意:即使图像不透明,在正常情况下也不会显示颜色,Web开发人员应该始终指定一个background-color
。如果图像无法加载 - 例如,当网络关闭时,背景颜色将被用作回退。
双引号失败时,单引号可能会绕过URL。
初始值 |
none |
---|---|
适用元素 |
all elements. It also applies to ::first-letter and ::first-line. |
是否是继承属性 |
no |
适用媒体 |
visual |
计算值 |
as specified, but with url values made absolute |
Animation type |
discrete |
正规顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
每个背景图像被指定为关键字none
或<image>
值。
要指定多个背景图片,请提供多个值,并用逗号分隔:
background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://mdn.mozillademos.org/files/7693/catfront.png');
值
none
是一个关键字表示没有图像。<image>
是<image>
表示要显示的图像。可以有几个,用逗号分隔,因为支持多个背景。
正式语法
<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( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] ) <rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] ) <hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] ) <hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] ) <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 <alpha-value> = <number> | <percentage> <hue> = <number> | <angle> <color-stop> = <color> <length-percentage>? <length-percentage> = <length> | <percentage>
示例
请注意,星形图像是部分透明的,并在cat图像上分层。
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
p { font-size: 1.5em; color: #FE7F88; background-image: none; background-color: transparent; } div { background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); } .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 3The definition of 'background-image' in that specification. |
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)The definition of 'background-image' in that specification. |
Recommendation |
From CSS1, the way images with and without intrinsic dimensions are handled is now described. |
CSS Level 1The definition of 'background-image' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic Support |
1 |
12 |
1.01 |
4 |
3.5 |
1.0 |
Multiple backgrounds |
1.0 |
12 |
3.6 |
9.0 |
(Yes) |
1.3 |
Gradients |
1.02 |
12 |
3.63 |
10 |
114 |
4.02 |
SVG images |
8.0 |
12 |
4.0 |
9.0 |
9.5 |
5.05 |
element() |
No |
No |
(Yes)6 |
No |
No |
No |
image-rect() |
No |
No |
(Yes) -moz- 7 |
No |
No |
No |
Any <image> value |
(Yes) |
? |
No |
? |
? |
? |
Feature |
Android |
Chrome for Android |
Edge mobile |
Firefox for Android |
IE mobile |
Opera Android |
iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
Multiple backgrounds |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
Gradients |
(Yes) |
(Yes)2 |
(Yes) |
(Yes)3 |
(Yes) |
(Yes)4 |
(Yes)2 |
SVG images |
No |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
(Yes) |
5.05 |
element() |
No |
No |
No |
(Yes)6 |
No |
No |
No |
image-rect() |
No |
No |
No |
(Yes) -moz- 7 |
No |
No |
No |
Any <image> value |
(Yes) |
(Yes) |
? |
No |
? |
? |
? |
1. 如果browser.display.use_document_colors
用户偏好about:config
设置为false
,则不会显示背景图像。
2. 某些版本仅支持以-webkit
,-moz
,或为-o
前缀的实验性渐变。