Applying opacity to container, but not the children or contents inside

HTML & CSS
1

Hello,
I am having some problems learning or applying opacity to an object, but not its children elements or the content inside it. It is a problem I have encountered many time,s but this time it is in the web of some design.
For example, in the below code, the out-container should be black with a 60% opacity, but the red container and white test inherits the opacity as well.

<!Doctype HTML>
<html lang="en">
<head>
       <style>
           div#blackContainer{
                        margin:0 auto;
                        background-color:#000;
                        width:75%;
                        height:60%;
                        opacity:0.6;
           }
           div#redContainer{
                        margin:0 auto;
                        background-color:#ff0000;
                        width:55%;
                        height:50%;
           }
           p.content{
                        color:#fff;
           }
       </style>
</head>
<body>
         <div id="blackContainer">
                     <div id="redContainer">
                                <p class="content">This is the content. I want to have a full opacity</p>
                     </div>
         </div>
</body>
</html>

Even when I add the full opacity of 1.0 to the child element, #redContainer, and to the content in the css as seen here

<style>
           div#blackContainer{
                        margin:0 auto;
                        background-color:#000;
                        width:75%;
                        height:60%;
                        opacity:0.6;
           }
           div#redContainer{
                        margin:0 auto;
                        background-color:#ff0000;
                        width:55%;
                        height:50%;
                        opacity:1.0;
           }
           p.content{
                        color:#fff;
                        opacity:1.0;
           }
       </style>

The content and the child element, #redContainer, still have the .60 opacity???:confused:

Would adding !important to the opacity:1.0; property solve this? Or is there a more proper or better solution?

I would appreciate any help with this.

Thanks in Advance & Best Regards,
Team 1504

2

This should explain it for you :~) http://www.visibilityinherit.com/code/css-opacity.php

3

The opacity of the parent element sets the upper-bound for how opaque the child elements can be. For example, consider your own code. #redContainer has 100% opacity relative to #blackContainer with 60% opacity, so that 100% means being as fully opaque as possible without being more opaque than #blackContainer. If #redContainer has 50% opacity, then that is relative to #blackContainer’s 60% opacity, so 50% would mean half as opaque as #blackContainer. You cannot set a value greater than 100%, so opacity is not the right tool for the job.

No need to despair though, because what you want is possible through another approach. Instead of setting the color of text and the background using hexadecimal codes, use rgba() instead and include a workaround for Internet Explorer, as explained here: http://css-tricks.com/rgba-browser-support/

4

That helped and solved everything! Thank you kindly :slight_smile:

5

Actually when I implimented the solution it did not work at all.

So I understood it and it seemed logical, but it did not work.

What html is written by a php file. Echo just prints anything that it is given.

echo "<div id='news'>"; /*This is what I want to have the opacity */
echo "<div id='title'> </div>"; /*Content I want to have full opacity */
echo "<div id='words'> </div>"; /*Content I want to have full opacity */
echo "</div>";

I followed EricWatson’s link and it told me to add a blank div before the content to halt the opacity.

So I changed it to this:

echo "<div id='news'>";
echo "<div class='endTransparency'> </div>";
echo "<div id='title'> </div>";
echo "<div id='words'> </div>";
echo "</div>";

And then add the following styling:

/*There is other styling that defines the dimensions and colour of these elements, but that is earlier in the stylesheet*/
#news{
          position:relative;
}
#news .endTransparency{
                             opacity:0.6;
                             width:100%;
                             height:100%;
                             position:absolute;
                             top:0px;
                             left:0px;
                             z-index:-1;
}
#title, #words {
          position:relative;
}

Does anyone have any idea on what I am doing wrong? It seems odd though that I am applying the opacity to the element that is supposed the end the opacity. But that is what the link said to give the opacity to the container, news, and not the content (#title & words).

In the meantime, I will look into megamanXplosion’s link, but I would like to learn what I am doing wrong to further my knowledge and go to the css3 opacity solution if megamanXplosion’s does not work or is not sufficient.

Thanks in Advance,
Team 1504

6

Try removing the negative z-index.

…and you don’t have any opacity for the ies.

…and whenever I can’t get someone elses demo to work right (almost always js) I just go back and copy/paste the demo code and work from a working copy instead of trying to add it to mine.

7

Hmm that still didn’t work, but megamanXplosion’s rgba did work :slight_smile:

I usually do that with demos too, because it saves a lot of time.

It regards to IE, if the user is not going to choose a modern-browsers then they do not deserve to view a modern-website.

Thank you everyone for the help.