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

superimpose one transparent image on another with javascript

本文关键字：图像 透明图 透明 叠加 另一个 一个      更新时间：2023-09-26

是否可以在javascript中将透明背景图像叠加在另一个图像上?假设你有一个网站，上面有一堆产品图片、小玩意儿、小部件和小玩意，其中一些产品已经被制造商召回，你想在这些图片上加一个禁止进入的标志(斜杠圆圈图标)——以透明的方式，这样原始图片仍然可以显示出来。这能做到吗?目标是不必编辑图像。

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

你不需要Javascript，你可以很容易地用CSS完成。

下面的例子很简单。如果您将产品图像包装在容器元素中，并将该容器设置为position: relative，那么您就可以相对于该容器定位子元素。这样，如果窗口被调整了大小，那就无关紧要了。

查看jsFiddle的工作演示:http://jsfiddle.net/VNqSd/2/

<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;
}
相关文章：