javascript - 如何在html中将部分透明图像放在另一个图像上方？

Question

我想将一张图片放在另一张图片之上，这样当我将第二张图片设为部分透明时，第一张图片就会被看到。但我不想将背景图片用作第一张图片

 <div style="background-image: url("firstImage.png");">
    <img src="secondImage.png"/>
 </div>

因为这很明显。有没有什么技术可以将另一张图片放在第一张图片上而不将第一张图片作为背景图片。

Answer 1

试试这个:

 <div class="imageWrapper" style="position: relative; width: 195px; height: 195px;">
   <img src="firstImage.png" alt=.. width=.. height=..style="position: relative; z-index: 1;" />
   <img src="secondImage.png" alt=.. width=.. height=.. style="position: absolute;left:80px; top: 80px;z-index: 10;" />
 </div>

有关更多解决方案，请查看此 link .