background-image

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

尝试一下

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

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

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

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

语法

每个背景图像被明确规定为关键字 none 或是一个 <image> 值。

可以提供由逗号分隔的多个值来指定多个背景图像:

css
background-image:
  linear-gradient(to bottom, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5)),
  url("cat-front.png");

取值

none

是一个表示无背景图的关键字。

<image>

<image> 用来标记将要显示的图片。支持多背景设置,背景之间以逗号隔开。

正规语法

background-image = 
<bg-image>#

<bg-image> =
<image> |
none

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

示例

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

HTML

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

css
p {
  font-size: 1.5em;
  color: #fe7f88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image: url("mdn_logo_only_color.png");
}

.catsandstars {
  background-image: url("star-transparent.gif"), url("cat-front.png");
  background-color: transparent;
}

结果

无障碍相关

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

规范

Specification
CSS Backgrounds and Borders Module Level 3
# background-image
初始值none
适用元素所有元素. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值as specified, but with <url> values made absolute
动画类型离散值

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-image
element()
Experimental
Gradients
image-rect()
DeprecatedNon-standard
image-set()
Multiple backgrounds
none
SVG images

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

参见