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>
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. | Initial definition. |
浏覽器相容性
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic Support | 1 | 12 | 1.01 | 4 | 3.5 | |
Multiple backgrounds | 3.6 | 9.0 | (Yes) | 1.3 | ||
Gradients | 1.02 | 3.63 | 10 | 114 | 4.02 | |
SVG images | 8.0 | 9.5 | 5.05 | |||
element() | No | (Yes)6 | ||||
image-rect() | (Yes) -moz- 7 | |||||
Any <image> value | ? |
Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari | |
---|---|---|---|---|---|---|---|
(Yes)2 | (Yes)3 | (Yes)4 | |||||
1. 如果
browser.display.use_document_colors
使用者偏好
about:config
設定為
false
,則不會顯示背景圖像。
2. 某些版本僅支援以
-webkit
,
-moz
,或為
-o
字首的實驗性漸變。