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

Question

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

这是我的意思：

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

CSS将是：

#outer {
  opacity: 0.5;
}

#inner {
  opacity: 1.0;
}

我尝试过了，但它不起作用。

请帮忙。

谢谢。

- Moksha

---

可能是CSS - 不透明文本在低不透明度div上？的重复问题。 - Félix Adriyel Gagnon-Grenier

Answer 1

一种简单且兼容的解决方案是删除所有的 opacity，并使用：

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

• 支持rgba的浏览器将使用带有rgba的第二个background声明。
• 不支持rgba的浏览器将忽略第二个background声明，并使用.png。

_{.png在IE6中无法使用，但这不太可能是一个问题。如果确实存在问题，可以解决。}

---

这里详细介绍另一种方法：

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

- thirtydot

---

现代浏览器只需使用 background: rgba(255,255,255,0.5)，无需使用 .png。 - thirtydot

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/

- Thomas Shields

Answer 3

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

- Hello World

Answer 4

您可以这样设置外部div： background-color: rgba(0, 0, 0, 0.8); opacity: inherit; 这将使您的div具有半透明的黑色背景。

- i4snow

Answer 5

这可以通过一个技巧轻松完成，具体步骤如下：

你需要创建一个新的div，并将其设置为position: relative;，然后将透明div外面的文本放入该新div中。

- Hadi

---

感谢您抽出时间贡献答案。正是因为像您这样乐于助人的同行，我们才能作为一个社区一起学习。以下是一些关于如何撰写出色答案的提示：如何撰写出色答案。 - Brien Foss