background-image

CSS background-image 属性用于为一个元素设置一个或者多个背景图像。

尝试一下

在绘制时,图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。

然后元素的边框 border 会在它们之上被绘制,而 background-color 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系,需要在 CSS 属性background-clipbackground-origin 中定义。

如果一个指定的图像无法被绘制 (比如,被指定的 URI 所表示的文件无法被加载),浏览器会将此情况等同于其值被设为 none

备注: 即使图像是不透明的,背景色在通常情况下并不会被显示,web 开发者仍然应该指定 background-color 属性。如果图像无法被加载—例如,在网络连接断开的情况下—背景色就会被绘制。

语法

每个背景图像被明确规定为关键字 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> 用来标记将要显示的图片。支持多背景 (en-US)设置,背景之间以逗号隔开。

正规语法

background-image = 
<bg-image>#

<bg-image> =
<image> |
none

<image> =
<url> |
<gradient>

示例

注意星星图片部分透明且位于猫图片上方。

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

运行结果

无障碍相关

浏览器不会向辅助技术提供有关背景图像的任何特殊信息。这对于屏幕阅读器来说非常重要,因为屏幕阅读器不会告知用户它的存在,因而不能向用户传达任何信息。如果图像包含对理解页面总体目的至关重要的信息,则最好在文档中作出语义性地描述(describe it semantically)。

规范

Specification
Unknown specification
# background-image
初始值none
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值as specified, but with url values made absolute
Animation typediscrete

浏览器兼容性

BCD tables only load in the browser

[1] 如果 about:configbrowser.display.use_document_colors 被设置为 false, 背景图像将不会展示。

[2] 当前的 iOS Safari 版本 (5.0) CSS 背景属性对 SVG 的支持并不完善。iOS Safari (5.0) 之前的版本亦是如此。

参见