用javascript将一个透明图像叠加到另一个上

Question

在javascript中是否可以将透明背景图像叠加到另一个图像上？假设您有一个包含大量产品图片，小玩意儿和小部件以及东西的网站，其中一些产品已经被制造商召回，并且在那些图像上您想要叠加“拒绝输入”标志（圆圈与 - 斜线图标） - 以透明的方式使原始图像仍然显示。可以这样做吗？目标是不必编辑图像。

我是否沿着正确的轨道将透明背景图像放在没有不透明度的DIV中，并使用clientWidth和clientHeight根据原始图像的大小调整透明背景图像及其容器DIV的大小，然后定位DIV在原始图像的顶部？如果窗口调整大小并且布局动态变化，那么叠加DIV如何/何时被告知移动到原始图像的新位置？没有像LayoutChangedEvent那样的东西吗？是否必须使用setInterval重复检查原始图像的位置？

Answer 1

您不需要Javascript，您可以使用CSS轻松完成此操作。

以下示例非常简单。如果将产品图像包装在容器元素中并将该容器设置为position: relative，则可以相对于该容器定位子元素。这样，如果调整窗口大小，则无关紧要。

在jsFiddle上查看工作演示：http://jsfiddle.net/VNqSd/2/

HTML

<div class="container">
  <img src="http://nontalk.s3.amazonaws.com/product.png" 
       width="100" height="100" />
  <img src="http://nontalk.s3.amazonaws.com/overlay.png" 
       class="overlay" width="100" height="100" />
</div>

<强> CSS

.container {
  position: relative;   
}
.overlay {
  position: absolute;   
  left:0;
  top: 0;
  z-index: 999;
}