css中添加两个背景图

在CSS中可以使用background属性添加背景图，而且通过使用多重背景图层，我们可以很容易地在一个元素上添加两个或多个不同的背景图。在下面的代码块中，我们可以看到一个示例：

div {
  background-image: url('background1.png'),url('background2.png');
  background-position: center,left top;
  background-repeat: no-repeat,repeat;
}

在上面的代码中，我们在一个名为div的元素上添加了两个背景图层。第一个背景图层是位于中央的背景图，而第二个背景图层是水平重复的背景图。对于每个背景图层，我们可以单独设置位置和重复方式。如果没有设置背景图层的位置，默认情况下它们将位于左上角。

为了让代码更加清晰易懂，我们来逐行解释一下：

1. 首先，我们选择要添加背景图的元素，这里选择的是一个div元素。

div {

2. 接着，我们使用background-image属性添加两个背景图，并且在它们之间用逗号分隔。

background-image: url('background1.png'),url('background2.png');

3. 然后，我们使用background-position属性设置每个背景图层的位置。第一个背景图层位于中央，第二个背景图层默认位于左上角。

background-position: center,left top;

4. 接下来，我们使用background-repeat属性设置每个背景图层的重复方式。第一个背景图层不需要重复，第二个背景图层水平重复。

background-repeat: no-repeat,repeat;

5. 最后，我们使用右括号结束选择器。

}

通过使用多重背景图层，我们可以很容易地在一个元素上添加两个或多个不同的背景图，提供更具创意性的设计方案。