Question

我需要解决以下问题。

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

我需要在img2上显示img1，所以在img2有transcparent颜色的地方，会看到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中工作，您将需要应用您提到的过滤器。此过程为detailed here。

Answer 2

您无需使用任何类型的过滤器（except in IE6）。

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

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

Answer 3

如果您正在使用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＆amp; left值

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

Answer 4

您可以尝试将他们的.style.position设置为“绝对”，在左侧和顶部（或右侧或底部）给它们相同的坐标，然后更改它们的z-index。虽然它很脏，也许它对你的页面效果不好，但我想不出另一个解决方案。

如何在javascript中叠加图像？

4 个答案: