css多张图片叠加 |css动画 从右到左出现

下面大家来看一下如何以层叠的方式叠加多张图片：

.container {
position: relative; /*必须是相对定位*/
background: url(bg.png);
background-size:cover;
width: 500px;
height: 500px;
}
.container:before {
content: "";
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
background: url(img1.png);
background-size: cover;
opacity: 0.5;
}
.container:after {
content: "";
position: absolute;
top:50px;
left:50px;
right:0;
bottom:0;
background: url(img2.png);
background-size: cover;
opacity: 0.5;
}

上述代码中，大家首先定义了一个容器，为了能够以层叠的方式叠加多张图片，容器必须已经具备了相对定位的属性。其次，大家使用了:before和:after伪类，通过absolute定位它们在容器内的位置，并且让他们的背景图片相互叠加。

需要注意的是，只有具有相对定位的元素，才可以使用绝对定位。并且在使用:before和:after伪类的时候，大家需要为它们设置content属性，否则它们不会显示。

以上就是关于CSS多张图片叠加的简介，希望对大家有所帮助。