Question

Is it possible? If it’s not possible can someone give me some good workaround?

This fiddle will explain my problem very clrearly

http://jsfiddle.net/9AWdz/

Answer 1

Given this structure:

<div id="headerOut">
    <div id="headerIn"></div>
</div>
<div id="normalRed"></div>

You can’t do it with the opacity setting, because headerOuts opacity is applied on top of what headerIns opacity is. headerIn can be less opaque than headerOut, but never more.

However, you can simulate the desired effect by carefully setting color and background with rgba(), and by carefully setting the opacity of child elements.

For example:

#headerOut {
    background-color:   rgba(0, 255, 0, 0.4);
    color:              rgba(0,   0, 0, 0.4);
}
#headerOut > img {
    opacity:            0.4;
}
#headerIn, #normalRed {
    background-color:   red;
    color:              black;
    opacity:            1;
}

For IE 8 and below, just let those users view a less flashy version of the site, or patch the effect like so (using IE’s conditional comments):

<!--[if lt IE 9]>
<style type="text/css">
    #headerOut {
        background-color: #AFA;
        color: #888;
    }
    #headerOut > img {
        filter: alpha(opacity='40');
    }
</style>
<![endif]-->

See this in action at jsFiddle.

---

Pretty much anything else requires javascript. EG:

1. Using the original layout…
2. Have jQuery, etc. clone the headerIn node, append the clone to the document body, and then overlay it directly upon the original node.