背景图片 | background-image (Backgrounds & Borders) - CSS 中文开发手册 - Break易站
背景图片 | background-image (Backgrounds & Borders) - CSS 中文开发手册
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-originCSS属性定义。
如果无法绘制指定的图像(例如,无法加载指定的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前缀的实验性渐变。
CSS 中文开发手册