两个背景图片 CSS

有时候，我们需要在网站中添加多个背景图片。在这篇文章中，我们将学习如何在 CSS 中添加两个背景图片。

添加单个背景图片

首先，我们来看一下如何添加单个背景图片。我们可以使用 CSS 的 background-image 属性来实现。

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

在上面的代码中，我们将 body 元素的背景图片设置为 background.jpg。

添加多个背景图片

要添加多个背景图片，我们可以使用 CSS3 提供的多背景技术。我们可以使用 background-image 属性多次设置不同的背景图片。

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

在上面的代码中，我们将 body 元素的两个背景图片设置为 background-1.jpg 和 background-2.jpg。我们使用逗号分隔多个背景图片，然后使用 background-position 属性来指定每张图片的位置，使用 background-repeat 属性来指定不重复。

其他多背景技术

除了使用多个 background-image 属性外，我们还可以使用 background 简写属性来设置多个背景图片。我们可以使用类似下面的语法：

background: url("background-1.jpg") center top no-repeat, url("background-2.jpg") center bottom no-repeat;

在上面的代码中，我们使用 background 简写属性来设置两个背景图片，然后使用逗号分隔它们。在每个背景图片的设置中，我们使用 url() 函数来指定图片路径，然后我们使用 center top 和 center bottom 分别来指定图片的位置，然后使用 no-repeat 来避免重复。

到此为止，我们已经学会了如何在 CSS 中添加两个背景图片。