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???
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