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

CSS是一种样式语言，可以用来控制HTML文档的外观和排版。在前端开发中，我们经常会遇到需要将两张图片叠在一起的情况。下面，我们来介绍一下如何使用CSS实现这种效果。 .container { : ...

CSS是一种样式语言，可以用来控制HTML文档的外观和排版。在前端开发中，我们经常会遇到需要将两张图片叠在一起的情况。下面，我们来介绍一下如何使用CSS实现这种效果。

 .container {
   position: relative;
 }

 .image-1 {
   position: absolute;
   top: 0;
   left: 0;
 }

 .image-2 {
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0.5;
 } 

上述代码中，我们首先创建了一个容器元素，其位置设置为相对定位。然后，在容器中分别创建了两个图片元素，通过设置它们的绝对定位和z-index属性，使它们互相叠在一起。其中，第二张图片的透明度设置为0.5，可以使两张图片的叠加效果更加自然。

此外，在实际应用中，我们还可以通过CSS的transform属性来对图片的位置、大小、旋转等进行调整。例如，下面的代码将第二张图片左移了50px，上移了50px。

 .image-2 {
   position: absolute;
   top: 50px;
   left: 50px;
   opacity: 0.5;
 } 

总之，通过CSS的灵活运用，我们可以轻松地实现两张图片的叠加效果，为网页设计增添丰富多彩的视觉效果。