如何在javascript中叠加图像？

Question

我需要解决以下问题.

我有两个(或更多)相同尺寸的.PNG图像.每个PNG图像都使用透明背景颜色创建.

我需要显示img1并在其上显示img2,所以在img2具有trancparent颜色的地方,将会看到img1.

例如:img1上部填充透明色,牛下部填充.img2上半部分包含云,下部填充透明色.

我想把这两个图像结合起来,看看母牛上面的云.

我知道在显示两个图像时我需要使用一些过滤器,但不确定使用哪个过滤器和哪个参数.

Answer 1

这样的东西应该工作(只使用HTML/CSS):

HTML:

<div class="imageWrapper">
  <img class="overlayImage" src="cow.png">
  <img class="overlayImage" src="clouds.png">
  <img class="overlayImage" src="downpart.png">
</div>

CSS:

.imageWrapper {
  position: relative;
}
.overlayImage {
  position: absolute;
  top: 0;
  left: 0;
}

请记住,IE6不能很好地处理PNG中的透明度.如果您需要它在IE6中工作,您将需要应用您提到的过滤器.此过程详述此处.

Answer 2

您不需要使用任何类型的过滤器（IE6 除外）。

您可以简单地将<img>元素放置在彼此之上，使用 CSSposition: absolute使两个元素占据相同的区域。

在 IE6 中，您需要一个AlphaImageLoader过滤器来以透明方式显示 PNG