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

Question

是否可以在 javascript 中将透明背景图像叠加到另一个图像上？假设您有一个网站，其中包含一堆产品图片、小玩意和小部件以及 thingamajigs，其中一些产品已被制造商召回，并且您希望在这些图像上叠加“请勿进入”标志（圆圈与-斜线图标）- 以透明方式显示原始图像。可以这样做吗？目标是不必编辑图像。

我是否走在正确的轨道上，将透明背景图像放入不透明的 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;
}