如何在javascript中叠加图像？答案

【问题标题】：How to overlay images in javascript?如何在javascript中叠加图像？
【发布时间】：2011-03-07 20:27:36
【问题描述】：

我需要解决以下问题。

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

我需要显示img1和img2，所以在img2有透明颜色的地方，会看到img1。

例如： img1 上半部分填充透明色，下半部分有一头牛。 img2 上部是云，下部是透明色。

我想结合这两张图片，看看牛头顶的云。

我知道在显示两张图片时我需要使用一些过滤器，但不确定要使用哪一张以及使用哪些参数。

【问题讨论】：

您需要在 JS 中严格执行此操作还是可以使用其他工具（我在考虑 PHP/GD）？
这是您可以使用 CSS 而不是 javascript 实现的目标

标签： javascript image overlay

【解决方案1】：

您不需要使用任何类型的过滤器 (except in IE6)。

您可以简单地将 <img> 元素放在彼此的顶部，使用 CSS position: absolute 使两个元素占据同一区域。

In IE6, you'll need an AlphaImageLoader filter simply to display the PNGs with transparency

【讨论】：

对不起，没提过：我在IE6 :(有什么办法解决这个问题吗？
@Leo：是的；您需要使用AlphaImageLoader 过滤器。 24ways.org/2007/supersleight-transparent-png-in-ie6
我知道在 IE6 中我需要使用过滤器，例如： filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);有人可以写下怎么做吗？谢谢
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="SomeImage.png", sizingMethod="image");

【解决方案2】：

您可以尝试将它们的.style.position 设置为“绝对”，给它们与左和上（或右或下）相同的坐标，然后更改它们的 z-index。虽然它很脏，而且可能与您的页面不兼容，但我想不出其他解决方案。

【讨论】：

【解决方案3】：

这样的东西应该可以工作（仅使用 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 中工作，则需要应用您提到的过滤器。这个过程是detailed here。

【讨论】：

我使用了您的示例（使用 CSS 和 HTML），它始终显示第二张图像，但我看不到第一张图像的部分内容。我的图像肯定有透明背景，我使用以下 PHP 来创建它们：
$resultImage = imagecreatetruecolor (100, 100); $trans_colour = imagecolorallocatealpha ($resultImage, 0, 0, 0, 127);图像填充 ($resultImage, 0, 0, $trans_colour);后来用不透明的颜色在图像上绘画。
是的，如果您使用的是 IE 6，那么您将需要添加过滤器以使透明度完全起作用。

【解决方案4】：

如果您使用的是 jquery，请在任何浏览器中尝试此操作

<script>
$(function () {
    var position = $("#i1").offset();
    $('#i2').css({ position:'absolute', top:position.top, left: position.left});
});
</script>
<img id='i1' src='images/zap_ring.png' />
<img id='i2' src='images/zap_ring_hover.png' />

并调整top & left 值

$('#i2').css({ position:'absolute', top:position.top-10, left: position.left+5});

【讨论】：

在这种情况下使用jQuery就像使用AK47杀死苍蝇一样。
我对每张图像都使用了 style="filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" ，它们彼此之间都是半透明的。我需要完全不同的效果：看到第二张图片 100% 不透明度，而在有透明颜色的地方看到第一张图片。