目录

CSS background-image 属性

❮上一节完整的CSS参考下一节❯

示例

为 <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属性为元素设置一张或多张背景图片。

默认情况下，背景图片放置在元素的左上角，并垂直和水平重复。

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

提示：始终设置一个背景颜色当图片不可用时使用。

展示演示❯

默认值：	没有任何
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS1 + CSS3 中的新值
JavaScript 语法：	对象.style.backgroundImage="url(img_tree.gif)"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
background-image	1.0	4.0	1.0	1.0	3.5

CSS 语法

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

属性值

Value	Description	Demo
url('URL')	The URL to the image. To specify more than one image, separate the URLs with a comma	Demo ❯
none	No background image will be displayed. This is default
conic-gradient()	Sets a conic gradient as the background image. Define at least two colors	Demo ❯
linear-gradient()	Sets a linear gradient as the background image. Define at least two colors (top to bottom)	Demo ❯
radial-gradient()	Sets a radial gradient as the background image. Define at least two colors (center to edges)	Demo ❯
repeating-conic-gradient()	Repeats a conic gradient	Demo ❯
repeating-linear-gradient()	Repeats a linear gradient	Demo ❯
repeating-radial-gradient()	Repeats a radial gradient	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about 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"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

亲自试一试 »

示例

设置线性渐变（两种颜色）作为 <div> 元素的背景图片：

#grad1 {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow);
}

亲自试一试 »

示例

设置线性渐变（三种颜色）作为 <div> 元素的背景图片：

#grad1 {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow, green);
}

亲自试一试 »

示例

Repeating-Linear-gradient() 函数用于重复线性渐变：

#grad1 {
height: 200px;
background-color: #cccccc;
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

亲自试一试 »

示例

设置径向渐变（两种颜色）作为 <div> 元素的背景图片：

#grad1 {
  height: 200px;
  background-color: #cccccc;
  background-image: radial-gradient(red, yellow);
}

亲自试一试 »

示例

设置径向渐变（三种颜色）作为 <div> 元素的背景图片：

#grad1 {
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, yellow, green);
}

亲自试一试 »

示例

Repeating-radial-gradient() 函数用于重复径向渐变：

#grad1 {
height: 200px;
background-color: #cccccc;
background-image: repeating-radial-gradient(red, yellow 10%, green 20%);
}

亲自试一试 »

相关页面

CSS教程：CSS 背景,CSS 背景（高级）,CSS 渐变

HTML DOM 参考：背景图片属性

❮上一节完整的CSS参考下一节❯