背景图片 | background-image (Backgrounds & Borders)

  CSS 中文开发手册

背景图片 | 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 中文开发手册

  本文标题：背景图片 | background-image (Backgrounds & Borders) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32237.html