[分享]css两个图片叠在一起

CSS是一种用来修饰网页样式的语言。在网页中，有时需要将两张图片叠在一起显示，这时可以使用CSS来实现。代码如下： .img1 { : absolute; zindex: 1; } .img2 {...

CSS是一种用来修饰网页样式的语言。在网页中，有时需要将两张图片叠在一起显示，这时可以使用CSS来实现。

代码如下：

<img src="img1.jpg" class="img1">
<img src="img2.jpg" class="img2">

<style>
    .img1 {
      position: absolute;
      z-index: 1;
    }
    .img2 {
      position: absolute;
      z-index: 2;
    }
</style> 

在上面的代码中，首先定义了两张图片，分别为和。

然后，通过CSS定义了图片的位置和层级。对于图片1，使用position: absolute;将其定位在页面上的绝对位置；再用z-index: 1;来设置其层级为1。对于图片2，同样使用position: absolute;定位和z-index: 2;层级定义。

这样，就可以实现将两张图片叠在一起显示，其中后面的图片会遮挡住前面的图片，形成叠加效果。

总的来说，在CSS中实现多张图片的叠加并不难，只需要设置好图片的位置和层级即可。这一技巧在网页设计中十分实用，可以丰富网页的设计效果。