两个背景CSS介绍

CSS是前端web开发中必不可少的一部分，它可以控制网页的样式，美化页面，提高用户体验。在CSS中，可以设置背景样式，通常情况下网页只有一个背景，但是有些时候，我们需要使用两个不同的背景，以增加整个网站的美观度和艺术性。在这篇文章中，我们将介绍如何使用两个背景的CSS样式。

CSS设置背景样式

在讲解双背景之前，我们先来了解一下如何设置单背景。

设置背景颜色

可以使用background-color属性来设置网页的背景颜色，比如：

body {
  background-color: #fff;
}

设置背景图片

也可以使用background-image属性来设置网页的背景图片，比如：

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

双背景CSS

在实际应用中，我们有时候需要设置比一个背景图片更好的视觉效果，这时候就需要用到双背景CSS。

方式一：双层div+CSS设置背景

我们可以在同一个div中再包含一个div元素，同时给两个div设置不同的背景样式，如下：

<div class="container">
  <div class="bg1"></div>
  <div class="bg2"></div>
</div>

.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.bg1 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("bg1.jpg");
  background-size: cover;
  z-index: -1;
}
.bg2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("bg2.jpg");
  background-size: cover;
  opacity: 0.5;
  z-index: -2;
  filter: alpha(opacity=50); /* 兼容IE低版本 */
}

在上面的代码中，我们先设置了一个容器，它的宽高都设置为100%，然后让其position属性为relative，这是因为我们在下面的背景图片中会让它们的position属性为absolute，如果不设置相对定位，则它们会以body为参考进行绝对定位。

bg1和bg2分别是两个背景div元素，其中，bg1的z-index为-1，bg2的z-index为-2。因为z-index为负值时，元素的层级就会在底部，可以理解为越小层级越低，而且这两个div的width和height都设置为100%来让他们铺满整个页面。

在这种方式下，我们可以通过改变透明度来调整两个背景图片的叠加效果。我们还可以使用filter属性，让其兼容低版本的IE。

方式二：background属性设置多背景信息

在CSS3中，background属性可以同时设置多个背景信息，其中使用逗号分隔不同图层，也就是说，我们可以直接将两个背景图片用逗号分隔来实现双背景，代码如下：

body {
  background-image: url("bg1.jpg"), url("bg2.jpg");
  background-size: cover, cover;
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
}

这种方式下，我们需要设置两个background-image，通过background-size、background-position、background-repeat来分别设置每个背景的大小、位置、重复方式。这种方式比较简洁，但是使用不是那么灵活，我们不能像第一种方式那样直接控制不同背景图片的透明度和层级关系。

Conclusion

以上就是使用双背景CSS的两种方法，可以根据不同网站的需求来选择不同的方法来设置双背景样式，如果需要更加定制化的双背景样式，还可以通过JS来实现。