CSS background-image 属性

设置body元素的背景图像：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      background-image: url("/examples/paper.gif");
      background-color: #cccccc;
    }
  </style>
</head>

<body>
  <h1>Hello World!</h1>
</body>

</html>

尝试一下 »

标签定义及使用说明

background-image属性设置一个元素的背景图像。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

默认值: none
继承: no
版本: CSS1
JavaScript 语法: object object.style.backgroundImage="url(stars.gif)"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

Property
background-image 1.0 4.0 1.0 1.0 3.5

注意 IE8 和更早版本的浏览器不支持多个背景图像在一个元素

注意IE7和更早的版本不支持"继承"的值。 IE8需要定义！DOCTYPE。 IE9支持"继承"。

提示和注释

Tip: 务必设置背景色，如果图像是不可用，将被使用。

属性值

值 说明
url('URL') 图像的URL
none 无图像背景会显示。这是默认
inherit 指定背景图像应该从父元素继承

在线实例

- 多个背景图片 - 本实例演示了文档中多个背景图像。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #example1 {
      background-image: url(img_flwr.gif), url(paper.gif);
      background-position: right bottom, left top;
      background-repeat: no-repeat, repeat;
      padding: 15px;
    }
  </style>
</head>
<body>

  <div id="example1">
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>

</body>
</html>

尝试一下 »

相关文章

CSS 教程: CSS Background

CSS3 教程: CSS3 Backgrounds