带图像和渐变的背景 - CSS

在 CSS 中，我们可以使用图片和渐变来创建各种不同的背景效果。这些效果可以用于网页的标题、导航栏等元素，以及整个网页的背景。

图像背景

要在 CSS 中使用图片作为背景，可以使用 background-image 属性。例如，在以下代码中：

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

以上代码将在 body 元素的背景中使用一个名为 background-image.jpg 的图片。

除了使用一张图片，我们还可以使用多张图片来创建复杂的背景，例如：

body {
  background-image: url("background-image-1.jpg"), url("background-image-2.jpg");
  background-position: top left, bottom right;
  background-repeat: no-repeat;
}

以上代码将在 body 元素的背景中同时使用两张图片，其中一张位于左上角，另一张位于右下角。

渐变背景

CSS 中有两种类型的渐变：线性渐变和径向渐变。

线性渐变

要创建线性渐变，可以使用 linear-gradient() 函数。以下是一个简单的例子：

body {
  background-image: linear-gradient(to bottom, #FFDAB9, #FFA500);
}

以上代码将创建一个颜色从粉色到橙色的上下线性渐变背景。

径向渐变

要创建径向渐变，可以使用 radial-gradient() 函数。以下是一个简单的例子：

body {
  background-image: radial-gradient(circle, #FFDAB9, #FFA500);
}

以上代码将创建一个从中心向四周径向渐变的背景，颜色从粉色到橙色。

结论

使用图片和渐变可以让我们在 CSS 中创建各种不同的背景效果，为网页增添个性化和美感。