css两层背景图

在CSS中，通常使用单个背景图作为元素的背景。但是，有时候我们想要使用两个不同的背景图，比如在一个元素上叠加两个背景图，这时，CSS的两层背景图功能就可以派上用场。

.element {
  background-image: url(image1.jpg), url(image2.jpg);
  background-position: center top, center bottom;
  background-repeat: no-repeat, no-repeat;
} 

通过上面的代码，我们可以看到这个元素有两个背景图，第一个是图片1，第二个是图片2。我们使用background-position（背景图位置）属性将两张背景图分别放在元素的顶部和底部居中。

接下来，我们使用background-repeat（背景图重复）属性让两个背景图都不重复，这样就合并了两个图像，形成了两层背景。

与单个背景图一样，这两个背景图都可以通过background-size（背景图大小）属性进行设置，可以使用像素或百分比等单位。同样的，我们也可以使用CSS3中的背景图渐变等高级特性，对两层背景进行更炫酷的处理。

需要注意的是，如果同时使用了两个背景图，那么其中一个必须有外部尺寸（比如父元素的宽高），否则两个背景图都会被缩小到元素盒子的大小。所以，在使用两层背景图的时候，我们需要非常小心地通过CSS来进行处理。