CSS background-image 属性

主题

定义和用法

background-image是 CSS 中用于设置元素背景图像的属性。它可以接受一个或多个图像 URL，创建复杂的背景效果。

background-image多个背景图像时，最先列出的图像位于最上层。

默认值：	none
继承性：	否
可动画性：	否。请参阅：可动画属性。
版本：	CSS1 + CSS3
JavaScript 语法：	object.style.backgroundImage="url(img_tree.gif)"

接下来通过多个实例演示background-image属性的用法，来深化您对background-image属性的理解。

实例代码运行代码

复制

body {
    background-image: url(deer.png);
    background-color: #8899ff;
}

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

值	描述	实例
`url()`	指向图像的url（要指定多个图像，请用逗号分隔 URL）。	Demo ❯
`none`	默认值，不会显示背景图像。
`conic-gradient()`	锥形渐变，将圆锥曲线渐变设置为背景图像（定义至少两种颜色）。	Demo ❯
`linear-gradient()`	线性渐变，将线性渐变设置为背景图像（定义至少两种颜色，从上到下）。	Demo ❯
`radial-gradient()`	径向渐变，将径向渐变设置为背景图像（定义至少两种颜色，中心到边缘）。	Demo ❯
`repeating-conic-gradient()`	重复锥形渐变，重复锥形渐变图案。	Demo ❯
`repeating-linear-gradient()`	重复线性渐变，重复线性渐变图案。	Demo ❯
`repeating-radial-gradient()`	重复径向渐变，重复径向渐变图案。	Demo ❯
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。