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

??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或<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;
}

结果

规范

浏览器兼容性

1. 如果browser.display.use_document_colors用户偏好about:config设置为false，则不会显示背景图像。

2. 某些版本仅支持以-webkit，-moz，或为-o前缀的实验性渐变。

??CSS 中文开发手册