Tony B 86

Other than using a png or absolute positioning with extra markup is there any way to keep the contents of a transparent div Opaque? I am using css transparency on a div with a background color but the contents of that div (including another div, text, images, links) also take on the transparency. I have fixed this before with absolute positioning and a couple of extra divs but I would like to avoid that this time around. here's the simplified code:

The Css

.socialDiv {
margin: 0 0 10px 0;
float: left;
padding: 7px;
clear: both;
background: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
opacity: .40; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=40); /* IE lt 8 */
-ms-filter: "alpha(opacity=40)"; /* IE 8 */
-khtml-opacity: .40; /* Safari 1.x */
-moz-opacity: .40; /* FF lt 1.5, Netscape */

And the HTML:

<div class="socialDiv"><a href=""><img src="" alt="" /></a></div>

2 answers

danwellman 5600
This was chosen as the best answer

Child elements do not inherit transparency when using rgba, but of course, that won't be as backwards-compatible, or as IE-friendly as your current code...

This page seems to have a solution...

Answered almost 8 years ago by danwellman
  • dur, totally forgot. Thanks! Tony B almost 8 years ago
  • In addition to rgba, there are always PNG background images with alpha transparency. (Still with IE-compatibility problems, though.) Doug almost 8 years ago

I think the best way to do this would be to have a 1px transparent png as your background. Otherwise, in CSS3 you'll be able to specify RGBA, but that's a ways down the road!

Answered almost 8 years ago by Brian Hicks