CSS background-image属性

定义和用法

background-image属性为元素设置一个或多个背景图像。默认情况下，背景图像放置在元素的左上角，并垂直和水平重复。

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

提示：如果图像不可用，请始终设置要使用的background-color。

特征	说明
默认值	none
继承	没有
动画	没有。CSS动画参考
CSS版本	CSS1 + CSS3 新值
JavaScript语法	object.style.backgroundImage="url(img_tree.gif)"尝试一下

表中的数字指定了完全支持该属性的第一个浏览器版本。数字后跟-ms-， -webkit-，-moz-或-o-指定使用前缀的第一个版本。

属性	Internet Explorer	Chrome	FireFox	Safari	Opera
属性名称
background-image	4.0	1.0	1.0	1.0	3.5

注意：IE8及更早版本不支持多个背景图像。

background-image: url|none|initial|inherit;

为<body>元素设置两个背景图像：

body {
 background-image: url("img_tree.gif"), url("paper.gif");
 background-color: #cccccc;
}

尝试一下

属性值	描述
url('URL')	图像的URL。要指定多个图像，请使用逗号分隔URL
none	不会显示背景图像。这是默认的
linear-gradient()	将线性渐变设置为背景图像。定义至少两种颜色（从上到下）
radial-gradient()	将径向渐变设置为背景图像。定义至少两种颜色（中心到边缘）
repeating-linear-gradient()	重复线性渐变
repeating-radial-gradient()	重复径向渐变
initial	将此属性设置为其默认值。查看initial关键字
inherit	从其父元素继承此属性。查看inherit关键字