superimpose one transparent image on another with javascript - Stack Overflow

admin管理员组

文章数量:1429876

Is it possible in javascript to superimpose a transparent-background image upon another image? Let's say you have a website with a bunch of product pictures, gizmos and widgets and thingamajigs, and some of these products have been recalled by the manufacturer and upon those images you want to superimpose the Do-Not-Enter sign (circle-with-slash icon) -- in a transparent manner so the original image still shows through. Can that be done? The goal is to not have to edit the images.

Am I going down the right track to put the transparent-background image in a DIV without opacity and to size the transparent-background image and its container DIV according to the size of the original image using clientWidth and clientHeight, and then position the DIV on top of the original image? If the window is resized and the layout changes dynamically, how/when would the superimposed DIV be told to move to the new location of the original image? There's nothing like a LayoutChangedEvent is there? Would the original image's position have to be checked repeatedly using setInterval?

Is it possible in javascript to superimpose a transparent-background image upon another image? Let's say you have a website with a bunch of product pictures, gizmos and widgets and thingamajigs, and some of these products have been recalled by the manufacturer and upon those images you want to superimpose the Do-Not-Enter sign (circle-with-slash icon) -- in a transparent manner so the original image still shows through. Can that be done? The goal is to not have to edit the images.

Am I going down the right track to put the transparent-background image in a DIV without opacity and to size the transparent-background image and its container DIV according to the size of the original image using clientWidth and clientHeight, and then position the DIV on top of the original image? If the window is resized and the layout changes dynamically, how/when would the superimposed DIV be told to move to the new location of the original image? There's nothing like a LayoutChangedEvent is there? Would the original image's position have to be checked repeatedly using setInterval?

• javascript
• image
• transparency
• opacity

Share Improve this question Follow asked Apr 21, 2011 at 17:47 TimTim 8,9393131 gold badges111111 silver badges193193 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You don't need Javascript for this, you can easily acplish this with CSS.

The example below is very simple. If you wrap the product image in a container element and set that container to position: relative then you are able to position child elements relative to that container. This way, if the window is resized it doesn't matter.

View a working demo on jsFiddle: http://jsfiddle/VNqSd/2/

HTML

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

CSS

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

本文标签： superimpose one transparent image on another with javascriptStack Overflow