[分享]css两张背景图重叠

CSS中有一个很有意思的特性，就是可以使用两张背景图并且让它们重叠在一起。这种效果可以让你的设计更具有层次感和美感，下面我们来看一下如何实现这样的效果。 .background { backgroun...

CSS中有一个很有意思的特性，就是可以使用两张背景图并且让它们重叠在一起。这种效果可以让你的设计更具有层次感和美感，下面我们来看一下如何实现这样的效果。

 .background {
        background-image: url('first-background.jpg'), url('second-background.jpg');
        background-position: center bottom, center top;
        background-size: cover;
    } 

在上面的代码中，我们使用了一个名为background的类，它的背景图有两张，第一张是first-background.jpg，放在最下面，第二张是second-background.jpg，放在最上面。我们还使用了background-position属性来控制两张背景图的位置，其中第一张背景图位于中间底部，第二张位于中间顶部。

而background-size属性则是为了保证画面不变形，它会将两张背景图都放大或缩小到cover的大小，使其铺满整个容器。

这样的代码就可以实现两张背景图重叠的效果了。不仅如此，还可以通过调整不同的属性来达到不同的效果，比如利用rgba设置两张背景图的透明度，制造一种梦幻般的效果。