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

Question

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?

related http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on — Adriano, Mar 02 '14 at 14:11
Only set background properties to get transparency, rather than using the `opacity` property. [This thread explains how](http://stackoverflow.com/questions/7900757/transparent-background-opaque-elements). — Domi, Apr 19 '14 at 07:02

score 5 · Answer 1 · answered Nov 18 '11 at 15:02

5

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.

answered Nov 18 '11 at 15:02

Damon Bauer

2,718
1
22
35

1

Trying using CSS3PIE: http://css3pie.com/documentation/supported-css3-features/#rgba http://css3pie.com – Damon Bauer Nov 18 '11 at 15:35
is there a way to just add css for IE? I just want to add some fallback – Hafiz Nov 18 '11 at 16:17
1

The only fallback without adding extra markup would be replacing the background color with a transparent png background image. – Damon Bauer Nov 18 '11 at 16:44

score 4 · Accepted Answer · answered Nov 18 '11 at 15:11

4

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{
...
 }

answered Nov 18 '11 at 15:11

Beatriz Oliveira

659
3
5

is there a way to just add css for IE? I just want to add some fallback – Hafiz Nov 18 '11 at 16:17

score 2 · Answer 3 · answered Oct 15 '12 at 03:19

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.

score 0 · Answer 4 · answered Nov 18 '11 at 15:35

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.

A bit of a side note: You'd need to set the child's opacity to 1.25 to compensate for a parent's 0.8 opacity, NOT 1.2. — WhyNotHugo, Apr 04 '14 at 20:24

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

4 Answers4