Layer-layer opacity

I have two layer, I'd like both to blend, how can I change their transparency to make one see-able from its u开发者_开发百科pper overlapped area.

You'll need to use CSS, and use the opacity tag. It requires a bit of work, because older versions of IE require non-standard settings, but this is an example:

.transparentLayer {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8
    filter: alpha(opacity=50);                  //  IE7 or older
    opacity: 0.5; // all real browsers
}

Change the 0.5 or 50 to be the amount of opacity you want (0=clear, 1/100=solid).

Use the CSS3 opacity property, or the rgba or hsla notation for the background color of the element, depending on what effect you want to achieve. See: http://jsfiddle.net/minitech/sN8uU/

You need to use z-index, position, and opacity

HTML:

<div id="layer1"></div>
<div id="layer2"></div>

CSS:

#layer1, #layer2 {
    position:absolute;
    top:0;
    left:0;
    width:500px;
    height:500px;
}

#layer1 {
    z-index:0;
    background-color:red;
}

#layer2 {
    z-index:1;
    background-color:blue;
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

Demo: http://jsfiddle.net/AlienWebguy/QqEdb/