使用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;
}