30

I have a list div which have a opacity set to 50 and inside this div I want to display some text with opacity 100,

Here's what I mean:

<div id="outer">
  <div id="inner">
    Text
  </div>
</div>

The CSS would be:

#outer {
  opacity: 0.5;
}

#inner {
  opacity: 1.0;
}

I tried that, but it doesn't work.

please help

Regards

Blender
  • 289,723
  • 53
  • 439
  • 496
Moksha
  • 1,030
  • 6
  • 17
  • 38

5 Answers5

23

A simple and compatible solution is to remove all your opacity, and use:

#outer {
    background: url(50%-transparent-white.png);
    background: rgba(255,255,255,0.5)
}
  • Browsers that support rgba will use the second background declaration with rgba.
  • Browsers that do not will ignore the second background declaration and use the .png.

The .png won't work in IE6, but that's unlikely to be a problem. If it is, it can be resolved.

Yet another method is detailed here:

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
13

There's two ways to do this: One is to just set the background-color of the container to a transparent color,with rgba(r,g,b,.5) - However, this is CSS3 and only supported in newer browsers.

The other way is to drop an absolutely positioned div inside the container, with an opacity of .5.

<div class="backgroundOpacity">
    My Epic Content
</div>
<br/>
<div class="backgroundDiv">
    <div id="background"> </div>
    My Other Epic Content
</div>
.backgroundOpacity {
 background-color:rgba(0,0,0,.5);
}
.backgroundDiv {
  position:relative;  
}
#background {
 position:absolute;
  top:0;
   left:0;
   width:100%;
   height:100%;
   background-color:#000;
   opacity: .5; 
}

http://jsfiddle.net/thomas4g/vVt8D/1/

Thomas Shields
  • 8,874
  • 5
  • 42
  • 77
7
background-color: rgba(0,0,0,0.5);
Hello World
  • 115
  • 1
  • 9
4

You could set your outer div like this

background-color: rgba(0, 0, 0, 0.8); opacity: inherit;

i4snow
  • 41
  • 1
1

This can be done by a trick and it's is so easy, here is how:

you wanna take the text outside of the transparent div and that's by making another div sat as position: relative;

Hadi
  • 29
  • 7
  • Thanks for taking the time to contribute an answer. It’s because of helpful peers like yourself that we’re able to learn together as a community. Here are a few tips on how to make your answer great: [How do I write a good answer](https://stackoverflow.com/help/how-to-answer). – Brien Foss Feb 14 '18 at 01:58