background-image

摘要

将一个或多个背景图像应用于一个元素。这些可以是任何有效的 CSS 图像，包括指向图像文件的 url() 路径或 CSS 渐变。

概述表

初始值: 无
适用范围: 所有元素
继承: 否
媒体: 视觉
计算值: 如指定，但 URI 已被设为绝对路径
可动画: 是
CSS 对象模型属性: backgroundImage
百分比: N/A

语法

background-image: <image>
background-image: <image>, <image>, …
background-image: none

值

无: 默认值。背景可见的下一个父元素的颜色。
<image>: 任何有效的 CSS 图像值，包括通过 CSS 图像: url() 或 CSS 渐变的图像文件。
<image>, <image>, …: 可以通过在属性值中包含所有图像引用（图像文件、渐变或混合），并用逗号分隔每个引用，将多个背景图像应用于单个元素。在属性值中较早引用的图像将出现在稍后引用的图像的前面。

示例

三个简单的 div 元素

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Background-image example</title>
  <link href="background-image.css" type="text/css" rel="stylesheet">
</head>
<body>

  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>

</body>
</html>

第一个 div 应用了一个简单的图像文件，第二个 div 应用了一个背景渐变，第三个 div 同时应用了两者。

.one {
  background-image: url(images/icon.png);
  /* here we are applying a single background image to our first block level container element */
  /* (could be anything, but it is a div in the live example. */
}

.two {
  background-image: linear-gradient(to bottom, #aaa, #eee);
  /* Here we are applying a linear gradient to our second block level container. */
}

.three {
  background-image: url(images/icon.png), linear-gradient(to bottom, #aaa, #eee);
  /* In this case we are applying both the background image and the gradient to our third block level container. */
}

查看实时示例

用法

 Background images in general have good support across browsers; there are a few things to take note of, however:

旧版浏览器不支持多个背景图像、SVG 作为背景图像或 CSS 渐变，因此在使用这些选项时要小心，以确保提供一个回退方案，使内容在旧版浏览器上可读，例如一个简单的纯色。
在使用多个背景图像时，逗号分隔列表中开头的图像会出现在后面的图像之上。这可能与 CSS 预期的行为相反。
由于渐变在某些浏览器中带有前缀，在某些浏览器中没有，并且在某些浏览器中带有稍旧的语法，因此应使用具有不同语法的多个背景渐变属性，如以下示例所示。

备注

与 background-image 属性相关的国际化主题

为文本扩展做准备

参见

背景

其他文章

外部资源

掌握 CSS3 多个背景图像，作者：Prisca Schmarsow

background-image

摘要

概述表

语法

值

示例

用法

备注

相关规范

参见

相关文章

背景

其他文章

外部资源