CSS background-image 属性

在 web 开发中，background-image 属性用于设置元素的背景图片。通过设置不同的背景图片，可以为网页增加视觉效果，提升用户体验。

语法

selector {
  background-image: url('image.jpg');
}

• selector：要设置背景图片的元素选择器。
• url('image.jpg')：背景图片的 URL 地址，可以是相对路径或绝对路径。

值

• none：默认值，表示元素没有背景图片。
• url('image.jpg')：指定背景图片的 URL 地址。
• linear-gradient()：linear-gradient() 使用线性渐变作为背景图片。
• radial-gradient()：radial-gradient() 使用径向渐变作为背景图片。
• repeating-linear-gradient()：repeating-linear-gradient() 重复使用线性渐变作为背景图片。
• repeating-radial-gradient()：repeating-radial-gradient()重复使用径向渐变作为背景图片。

示例

// www.javascriptcn.com code example
/* 使用 URL 地址设置背景图片 */
div {
  background-image: url('image.jpg');
}

/* 使用线性渐变设置背景图片 */
div {
  background-image: linear-gradient(to right, red, blue);
}

/* 使用径向渐变设置背景图片 */
div {
  background-image: radial-gradient(circle, red, blue);
}

通过 background-image 属性，可以为网页元素添加各种背景效果，从简单的图片背景到复杂的渐变背景，都可以轻松实现。