如何在其父容器的不透明度为50时保持文本不透明度为100

Question

我有一个列表div,其不透明度设置为50,在这个div中我想显示一些不透明度为100的文本,

这就是我的意思:

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

CSS将是:

#outer {
  opacity: 0.5;
}

#inner {
  opacity: 1.0;
}

我尝试过,但它不起作用.

请帮忙

问候

Answer 1

一个简单且兼容的解决方案是删除所有opacity,并使用:

#outer {
    background: url(50%-transparent-white.png);
    background: rgba(255,255,255,0.5)
}

• 支持的浏览器rgba将使用第二个background声明rgba.
• 浏览器不将忽略第二次background声明和使用.png.

_{这.png将不适用于IE6,但这不太可能是一个问题.如果是,则可以解决.}

还有另一种方法:

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

Answer 2

有两种方法可以做到这一点:一种是将容器的背景颜色设置为透明颜色,rgba(r,g,b,.5) 但是,这是CSS3,仅在较新的浏览器中支持.

另一种方法是在容器内放置绝对定位的div,不透明度为.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/

Answer 3

background-color: rgba(0,0,0,0.5);