background-image

**background-image** CSS 属性在元素上设置一个或多个背景图像。

试试看

背景图像在堆叠上下文层上彼此叠加绘制。指定的第一个图层将被绘制得好像它最靠近用户。

然后，元素的边框将被绘制在它们之上，并且background-color将被绘制在它们之下。图像相对于盒子及其边框的绘制方式由background-clip 和 background-origin CSS 属性定义。

如果指定的图像无法绘制（例如，当指定的 URI 所表示的文件无法加载时），浏览器将像处理 none 值一样处理它。

**注意：**即使图像是不透明的，并且颜色在正常情况下不会显示，网页开发者也应该始终指定background-color。如果图像无法加载——例如，当网络关闭时——背景色将用作备用颜色。

语法

css
/* single image */
background-image: linear-gradient(black, white);
background-image: url("catfront.png");

/* multiple images */
background-image: radial-gradient(circle, #0000 45%, #000f 48%),
  radial-gradient(ellipse farthest-corner, #fc1c14 20%, #cf15cf 80%);

/* Global values */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;

每个背景图像都指定为关键字 none 或 <image> 值。

要指定多个背景图像，请提供多个值，用逗号分隔。

值

none

是一个表示没有图像的关键字。

<image>

是一个 <image>，表示要显示的图像。可以有多个，用逗号分隔，因为 支持多个背景。

无障碍

浏览器不会向辅助技术提供有关背景图像的任何特殊信息。这对于屏幕阅读器来说尤为重要，因为屏幕阅读器不会宣布其存在，因此不会向其用户传达任何内容。如果图像包含了解页面总体目的的关键信息，则最好在文档中用语义方式对其进行描述。

此外，重要的是要确保背景图像和前景文本之间的对比度比率足够高，以便低视力人士能够阅读页面内容。

颜色对比度比率是通过比较文本和背景颜色值的亮度来确定的。为了满足 网页内容无障碍指南 (WCAG)，正文文本内容的比率要求为 4.5:1，标题等较大的文本的比率要求为 3:1。较大的文本定义为 24px 或更大，或 加粗 的 18.66px 或更大。

正式定义

初始值none
应用于所有元素。它也适用于 ::first-letter 和 ::first-line。
继承否
计算值如指定，但使用url() 值设置为绝对路径
动画类型离散的

正式语法

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-weight: bold;
  font-size: 1.5em;
  color: white;
  text-shadow: 0.07em 0.07em 0.05em black;
  background-image: none;
  background-color: transparent;
}

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

.catsandstars {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-color: transparent;
}

结果

规范

规范
CSS 背景和边框模块级别 3
# background-image

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅