Getting transparency from an upper element

Question

I am making a website and I have got a background of light blue, then on top of that I have a white transparent rectangle. Then all in there I have a div where my actual information is going to be, laid out like this

<div id = "transparent"> 

<div id = "yourinfo">

<div id = "profileinfo">
    <span id = "yourname"> Name </span>
    <br>
    <span> View </span>

</div>

</div>

</div>

However when I try and give a background colour to my main page above the transparent rectangle, this element is also transparent, how do I remove this transparency and get this element to appear as if on top of the transparent rectangle?

Here is my css for these elements

div#transparent{
    margin: 40px 40px auto;
    margin-top:0px;
    height: 620px;
    background-color: white;
    opacity:.3;
    padding: 20px;
}

div#yourinfo{
    width: 350px;
    height: 250px;
    background-color: red;
    border: 1px solid gray;
    opacity:1;
    -webkit-border-radius: 15px;
    padding:10px;
}

possible duplicate of [CSS: semi-transparent background, but not text](http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text) — Adrift, Aug 03 '13 at 15:41

score 0 · Accepted Answer · answered Aug 03 '13 at 15:48

The CSS opacity applies to children elements. To accomplish what you wish you will have to use the rgba (RGB plus Alpha/Transparency channel) on your background-color declaration.

Such as:

#transparent {
    background-color: rgba(255,255,255,0.3)
}

Be aware that this approach does not work with IE8<, so you might have to look for a workaround. Either you use a transparent .png (like in the olden days) or you use some conditional stylesheet and the Microsoft Internet Explorer proprietary syntax.

Also, obviously, this approach will only work if you don't want #transparent to have semi-transparent text; all text will be 100% opaque in that div. Accordingly, you can use the same CSS3 syntax on the text color.

Getting transparency from an upper element

1 Answers1