CSS background-image 属性

实例

设置 body 元素的背景图像:

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

亲自试一试 »

实例

为 body 元素设置两个背景图像:

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

亲自试一试 »

下面有更多实例。

定义和用法

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

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

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

提示: 请设置一种可用的背景颜色 background-color ，这样的话，假如背景图像不可用，可以使用背景色带代替。

默认值:	none
继承性:	no
支持动画:	no. 阅读有关动画的信息
版本:	CSS1 + new values in CSS3
JavaScript 语法:	object.style.backgroundImage="url(img_tree.gif)" 测试一下

浏览器支持

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

属性
background-image	1.0	4.0	1.0	1.0	3.5

注释: IE8 及其更早版本不支持一个元素上设置多个背景图片。

语法

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

属性值

值	描述
url('URL')	指向图像的URL。要指定多个图像，请用逗号分隔URL
none	无图像背景会显示。这是默认
linear-gradient()	创建一个线性渐变的 "图像"(从上到下)
radial-gradient()	用径向渐变创建 "图像"。 (center to edges)
repeating-linear-gradient()	创建重复的线性渐变 "图像"。
repeating-radial-gradient()	创建重复的径向渐变 "图像"
initial	将此属性设置为其默认值。请参阅 initial
inherit	从其父元素继承此属性。请参阅 inherit

更多实例

实例

为 body 元素设置两个背景图像。让第一个图像只出现一次（不重复），并让第二个图像重复:

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

亲自试一试 »

实例

使用不同的背景属性创建 "hero" 图像:

.hero-image {
background-image: url("photographer.jpg"); /* 使用的图像 */
background-color: #cccccc; /* 图像不可用时使用 */
height: 500px; /* 您必须设置指定的高度 */
background-position: center; /* 居中图像 */
background-repeat: no-repeat; /* 不要重复图像 */
background-size: cover; /* 调整背景图像的大小以覆盖整个容器 */
}

亲自试一试 »