CSS图片叠加 .wrapper { position: relative; width: 400px; height: 300px; } img.top-img { position: absolute; top: 0; left: 0; z-index: 2; } img.bottom-img { position: absolute; top: 0; left: 0; z-index: 1; }

CSS图片叠加

在网页设计中，有时需要将两张图片叠加在一起，使其产生视觉上的层次感，并达到一定的设计效果。下面是使用CSS实现图片叠加的代码示例：

在上面的代码中，我们使用了position、z-index等CSS属性来实现图片叠加效果。其中，bottom-img为底部图片，top-img为顶部图片，wrapper为图片的容器。通过给顶部图片设置z-index: 2，将其置于底部图片之上，从而实现图片的叠加效果。

需要注意的是，z-index需要与position属性配合使用才能起作用，且z-index值越大的元素越靠近顶部。此外，如果两张图片大小不一致，需要通过调整容器大小或使用object-fit等属性来调整图片大小以达到叠加效果。