[分享]css两个图片叠加效果

前端开发经常需要用到 CSS 实现图片的叠加显示，该功能可以有效地提升网页的展示效果和美观度。本文将介绍两种实现图片叠加效果的 CSS 技术。 一、使用 属性实现图片叠加 首先，在 HTML 文件中...

前端开发经常需要用到 CSS 实现图片的叠加显示，该功能可以有效地提升网页的展示效果和美观度。本文将介绍两种实现图片叠加效果的 CSS 技术。
一、使用 position 属性实现图片叠加
首先，在 HTML 文件中添加两个图片元素，并用 CSS 设置它们的 position 属性：

<div class="img-wrapper">
     <img class="img-1" src="img1.jpg">
     <img class="img-2" src="img2.jpg">
</div> 

.img-wrapper {
     position: relative;
}
<br>
.img-1, .img-2 {
     position: absolute;
     top: 0;
     left: 0;
} 

这里，父容器 .img-wrapper 设置了 position: relative，而两个子元素 .img-1 和 .img-2 则被设置了 position: absolute。接着，通过调整两个子元素的 z-index 属性来实现图片的叠加显示：

.img-1 {
     z-index: 1;
}
<br>
.img-2 {
     z-index: 2;
} 

这里将图片 2 的 z-index 值设为了较大的 2，即可将其置于图片 1 的上方，实现叠加效果。该方法可用于在图片上覆盖一些边角、样式等效果。
二、使用伪元素实现图片叠加
该方法可以在父容器上添加一个伪元素，利用 background-image 属性设置其背景图片，并通过设置 opacity 属性来实现图片叠加的效果。

<div class="img-container">
     <img src="img.jpg">
</div> 

.img-container {
     position: relative;
}
<br>
.img-container::after {
     content: ';
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url(img2.jpg);
     opacity: 0.5;
} 

这里，在 .img-container 上设置了 position: relative。然后，通过使用 ::after 伪元素，在其上设置了背景图片和 opacity 属性。这意味着我们可以通过设置不同的值来实现不同的叠加效果。
结论
以上两种方法都是实现 CSS 图片叠加效果的常见技术。相比而言，使用伪元素方法更易于理解和实现，并且具有一定的可控性和灵活性。而使用 position 属性的方法则更适用于一些特定的需求，比如在图片的边角处添加一些修饰。无论哪种方法，都可以帮助开发者为网页添加独特的叠加图片效果。