CODEWITHSUNDEEP
csstransparencyopacity
Hafiz
Hafiz

Reputation: 4267

CSS opacity, how to have opaque elements in transparent container element

I am using following CSS code:

.rounded_box{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:850px;
padding:15px;
background-color:#80C1FF;
margin:0 auto;
color: #0D2E47;
font-family: Arial,Helvetica,sans-serif;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
/* background-color:rgba(255,0,0,255);  */
}
.rounded_box h1{
  opacity:1.0;
 filter:alpha(opacity=100); /* For IE8 and earlier */ 
 }

And I want to have h1 and other elements as opaque that are inside div having class rounded_box . But is also making h1 and other elements transparent that I don't want.

So what can be the solution for this?

Upvotes: 2

Views: 10118

Answers (4)

Alex Hill
Alex Hill

Reputation: 21

A workable hack is to set all of your text within an absolute positioned div that is a sibling to the container you wish to be transparent. Position it absolutely over the container, set the Z index, and make sure your parent element is positioned relative.

Upvotes: 2

GHP
GHP

Reputation: 3231

Basically there's no magic bullet for this. Unfortunately, the opacity is inherited down to all children of an element with opacity, and there's no way to set opacity to "120%" to overcome 80% opacity on a parent element.

My comfort zone would be to have a containing div with no opacity, which holds 2 sub divs: one to hold the bg image, rounded edges, opacity, etc; and its sibling to hold the content. I'd use JavaScript to force the height of the opaque div to be the height of the content div, then I'd absolutely position the content div over the opaque one.

OR

I'd just use alpha transparent PNGs as the background image of the rounded box, assuming I didn't have to conditionally change their color or anything. You can do this and still accomodate variable widths and heights too, if you are willing to cut out the top/bottom/sides/corners separately.

Upvotes: 0

Beatriz Oliveira
Beatriz Oliveira

Reputation: 659

If are only looking for a transparent background on the rounded box element, use the following code:

.rounded_box{
...
background-color:rgba(128,193,255,0.6);
...
/*filter:alpha(opacity=60); Remove this */
}

.rounded_box h1{
...
 }

Upvotes: 4

Damon Bauer
Damon Bauer

Reputation: 2726

The opacity: 0.6 in .rounded_box will be applied to all child elements (thus the .rounded_box h1. So the h1 opacity:1.0 is really only 100% of the parent (0.6).

What you could do is use rgba to define the background color of .rounded_box, which does not affect children.

Upvotes: 5

Related Questions