background-image用法、属性值、示例

background-image 是一个 CSS 属性，用于设置元素的背景图像。你可以使用这个属性来指定一个或多个背景图像，它们可以是图片、渐变或其它 CSS 生成的内容。

background-image基本用法

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

这将会把指定的图像设置为元素的背景。

background-image属性值

• url()：最常用的值，用于指定背景图像的路径。
• linear-gradient()：创建一个线性渐变作为背景。
• radial-gradient()：创建一个径向渐变作为背景。
• element()：使用另一个元素的内容作为背景图像。
• none：没有背景图像。

background-image示例

• 使用图片作为背景：

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

• 使用渐变作为背景：

div {
  background-image: linear-gradient(to right, red , yellow);
}

• 使用径向渐变：

div {
  background-image: radial-gradient(circle, red, yellow);
}

• 使用多个背景图像：

div {
  background-image: url('image1.jpg'), linear-gradient(to right, red , yellow);
}

其他相关属性

• background-repeat：控制背景图像的重复方式。
• background-position：设置背景图像的位置。
• background-size：定义背景图像的尺寸。
• background-attachment：确定背景图像是否固定或者随着页面滚动。

示例

div {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

这段代码将创建一个不重复的背景图像，位于元素的中心，并且覆盖整个元素区域，当页面滚动时背景图像保持固定。

使用 background-image 属性可以丰富你的网页设计，增加视觉吸引力。