Stopping a child from inheriting alpha transparency

[FrickenTrevor]

I have this div which has transparency set to 40%.
The problem is that the rest of the divs inherit this tranparency, so I get a transparent background and transparent text.
How can I get a transparent background color but not transparent text? (the text is placed on a div box with a background color)
Heres the code (tranparrent stuff highlighted):

HTML:


<div id="content">
<div class="post">
<h2 class="title"><a href="#">Welcome to Inscriptions</a></h2>
<p class="meta"><span class="date">November 10, 2010</span><span class="posted">Posted by <a href="#">Someone</a></span></p>
<div style="clear: both;">&nbsp;</div>
<div class="entry">
<p>This is <strong>Inscriptions </strong>, a free, fully standards-compliant CSS template designed by FreeCssTemplates<a href="http://www.nodethirtythree.com/"></a> for <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)</p>
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.</p>
<p class="links"><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2>
<p class="meta"><span class="date">November 10, 2010</span><span class="posted">Posted by <a href="#">Someone</a></span></p>
<div style="clear: both;">&nbsp;</div>
<div class="entry">
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem. Mauris quam enim, molestie in, rhoncus ut, lobortis a, est.</p>
<p class="links"><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#">Consecteteur hendrerit </a></h2>
<p class="meta"><span class="date">November 10, 2010</span><span class="posted">Posted by <a href="#">Someone</a></span></p>
<div style="clear: both;">&nbsp;</div>
<div class="entry">
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem. Mauris quam enim, molestie in, rhoncus ut, lobortis a, est.</p>
<p class="links"><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>
</div>
</div>
<div class="post">
<h2 class="title"><a href="#">Suspendisse hendrerit </a></h2>
<p class="meta"><span class="date">November 10, 2010</span><span class="posted">Posted by <a href="#">Someone</a></span></p>
<div style="clear: both;">&nbsp;</div>
<div class="entry">
<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem. Mauris quam enim, molestie in, rhoncus ut, lobortis a, est.</p>
<p class="links"><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>
</div>
</div>
<div style="clear: both;">&nbsp;</div>
</div>


CSS:


/* Content */

#content {
float: right;
width: 520px;
padding: 70px 30px 0px 60px;
border: 1px solid #575555;
background: #454545;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
-moz-opacity:0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
}


.post {
margin-bottom: 40px;
}

.title {
padding: 0px 0px 10px 0px;
text-transform: lowercase;
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: -.5px;
}

.post .title a {
color: #79350A;
}

.post .meta {
overflow: hidden;
background: #EDE8CA;
margin-bottom: 30px;
padding: 5px 10px 5px 10px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}

.post .meta .date {
float: left;
}

.post .meta .posted {
float: right;
}

.post .entry {
padding: 0px 0px 20px 0px;
border-bottom: 1px dashed #DCD4A7;
text-align: justify;
}

[Nile]

I've had this problem before. Luckily, there's a great solution: http://www.css3.info/preview/rgba/

[traq]

yup. just to clarify, opacity will always apply to an element and its contents. that's what it is intended to do, and it will never work differently.

if you want transparent backgrounds in older and/or non-standards browsers, you'll need to rely on older methods:

1) use a small, semi-transparent background image.

2) use a wrapper <div> with two child <div>s: one with the content, one with the bg using opacity. use absolute positioning to put the content exactly on top of the background (this can be difficult, if not nearly impossible if you have a fluid layout).

3) progressively enhance your layout: use rgba, but first, use some other background image or (non-transparent) color. browsers that understand transparent colors will override the "old" rule; browsers that don't will ignore the "new" rule.

[FrickenTrevor]

Thanks for all your help... I might go with the rgba for newer browsers like Fire Fox 3.6+ and the semi-transparent background image for old stuff like IE 7+

[Nile]

No problem, I'm glad to help :D

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"