此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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 2015年7月.
* Some parts of this feature may have varying levels of support.
CSSbackground-image 属性用于为一个元素设置一个或者多个背景图像。
尝试一下
background-image: url("/shared-assets/images/examples/lizard.png");background-image: url("/shared-assets/images/examples/lizard.png"), url("/shared-assets/images/examples/star.png");background-image: url("/shared-assets/images/examples/star.png"), url("/shared-assets/images/examples/lizard.png");background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), url("/shared-assets/images/examples/lizard.png");<section> <div></div></section>#example-element { min-width: 100%; min-height: 100%; padding: 10%;}在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。
然后元素的边框border 会在它们之上被绘制，而background-color 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在 CSS 属性background-clip 和background-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("cat-front.png");取值
正规语法
background-image =
<bg-image>#
<bg-image> =
<image>|
none
<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>
<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)
<image-set()> =
image-set(<image-set-option>#)
<cross-fade()> =
cross-fade(<cf-image>#)
<element()> =
element(<id-selector>)
<image-tags> =
ltr|
rtl
<image-src> =
<url>|
<string>
<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?
<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?
<id-selector> =
<hash-token>
示例
注意星星图片部分透明且位于猫图片上方。
HTML
<div> <p>This paragraph is full of cats<br />and stars.</p> <p>This paragraph is not.</p> <p>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("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 |
| 动画类型 | 离散值 |