How to overlay a picture with another one?

What's a good method to overlay a picture with another one in HTML a开发者_JAVA技巧nd CSS or jQuery?

There are a few ways.

1. Set one image as a background on a container, and put the other image inside it
2. Position (possibly relatively but almost certainly absolutely) one image on top of the other
3. Play with negative margins

Which is best depends on exactly what you are trying to achieve (including the semantics of what you are trying to express).

The simplest is CSS positioning. Absolutely position the images in the same location. Make sure that the parent DIV is relatively positioned (or not default positioned), so that the absolute positions of the images are within the parent DIV and not the window. This should work in pretty much all browsers with CSS support.

HTML:

<div id="gallery">
    <img src="..." ... />
    <img src="..." ... />
</div>

CSS:

#gallery { position: relative; }
#gallery img { 
    position: absolute;
    top:0;
    left:0; }

If you want to make sure that the images completely cover each other up, you could also set the height and width with the CSS, or you can just make sure that the images are all the same size, or that the ones on top are bigger than the ones below (top and below dependent on order in the HTML or z-index).

JsFiddle example (test in many browsers)

html:

<div class="box">
  <img src="background.jpg" class="under" alt="" />
  <img src="overlay.jpg" class="over" alt="" />
</div>

css:

.over {
    position:absolute;
    z-index:100;  
}

.under {
    position:absolute;
    z-index:99;
}

.box {
    position:relative;
}