Transparent PNG as Background Image

I have an element with a transparent png as its background image - it's like a polaroid with the photo bit cut out so just the frame is showing.

With this as the background I then want a standard image to sit behind the element that has the transparent png background - to fit inside the frame.

i've tried setting z-indexing and opacity and although I can get the image to show through its obviously transparent because of the opacity settings.

Any ideas?

---

If .yourPhoto is a background image, you could do this:

<div class="yourPhoto">
    <div class="yourPNGframeImage">
    </div>
<div>

Or you could use inline images and position both absolute:

 <div class="container">
      <img class="yourPhoto" src="">
      <img class="yourPNGframeImage src="">
 </div>

.container {position: relative;}
.yourPhoto, .yourPNGframeImage {position: absolute; top: 0px; left: 0px;}

---

there is a fair few things to look out for when doing PNG.

when cutting make sure you background is off.

export as png24.

if your in ie6 you will need to use someting like twin-helix png fix

http://www.twinhelix.com/

Try these steps. You should not have to change the opacity of your image as it will affect the whole image. When you use z-indexing you should also put in the position css element

链接地址: http://www.djcxy.com/p/89310.html

上一篇: 在IE中使图像透明以显示非

下一篇: 透明的PNG作为背景图像