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