Making content inside a low opacity div have higher opacity?

Question

I have a div that has a low opacity, so the background is visible through it. However, I want the content inside to have full opacity. Right now, I have set the opacity to the inner div, logo, to full opacity, but it still has the low opacity.

My code is below.

This is the style for the two divs.

#container {
-moz-opacity: 0.48;
opacity: 0.48;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=48);
}

#logo {
-moz-opacity: 1.00;
opacity: 1.00;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}

This is where I implement it.

<div id="container">
<div id="logo">
<center><img src="logo.png" /></center>
</div>
</div>

This is a duplicate. Why don't you use google or look at stack overflow before you ask this question? — jamespick, Dec 07 '13 at 19:18

score 2 · Answer 1 · answered Dec 07 '13 at 19:08

2

Try set opacity of the #container using. This should fix your issue

background-color:rgba(r,g,b,0.48)

answered Dec 07 '13 at 19:08

Anil Namde

6,452
11
63
100

the opacity doesnt work. It still has the full opacity – elliotanderson Dec 07 '13 at 19:14
check this thread it should work http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text – Anil Namde Dec 07 '13 at 19:16

Making content inside a low opacity div have higher opacity?

1 Answers1