background-image

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

示例 

background-image: url("/upload/browser/compatible_ie.gif");
background-image: url("/upload/browser/compatible_ie.gif"),
                  url("/upload/browser/compatible_firefox.gif");
background-image: url("/upload/browser/compatible_firefox.gif"),
                  url("/upload/browser/compatible_ie.gif");
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("/upload/browser/compatible_ie.gif");

浏览器支持

IE浏览器 火狐浏览器 opera浏览器 chrome浏览器 safari浏览器
浏览器都支持 background-image

语法：

background-image ： none | <image>

取值：

  • none ：无背景图。
  • <image> ：使用绝对或相对地址指或者创建渐变色来确定图像。

说明：

设置或检索对象的背景图像。

  • 如果设置了<background-image>，同时也建议设置<background-color>用于当背景图像不可见时保持与文本颜色有一定的对比度。
  • 如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上。
  • 对应的脚本特性为 backgroundImage 。

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

  • 在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。
  • 然后元素的边框border会在它们之上被绘制，而 background-color 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在CSS属性 background-clip 和 background-origin 中定义。
  • 如果一个指定的图像无法被绘制(比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 none 。
  • 即使图像是不透明的，背景色在通常情况下并不会被显示，web开发者仍然应该指定 background-color 属性。如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。
默认值 none
适用于 所有元素
继承性 无
动画性 否
计算值 指定值

例子 

//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）。

  • MDN Understanding WCAG, Guideline 1.1 explanations
  • Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0 
<!DOCTYPE html>
<html>
<head>
<style>
div{
	width:450px;
	height:300px;
	background-image:url("images/22.jpg");
}
</style>
</head>

<body>
<div></div>
</body>
</html>

效果图：


上篇： background-color

下篇： background-repeat