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

Posted 2023-03-06

【中文标题】当其父容器的不透明度为 50 时如何保持文本不透明度为 100

【英文标题】：How to keep text opacity 100 when its parent container is having opacity of 50

【发布时间】：2011-09-20 18:24:22

【问题描述】：

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

这就是我的意思：

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

CSS 将是：

#outer 
  opacity: 0.5;


#inner 
  opacity: 1.0;

我试过了，但是没用。

请帮忙

问候

【问题讨论】：

CSS - Opaque text on low opacity div?的可能重复

【参考方案1】：

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

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

【参考方案2】：

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

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

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

_{.png 在 IE6 中不起作用，但 unlikely 是一个问题。如果是，it can be resolved。}

---

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

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

【讨论】：

现代浏览器可以使用background: rgba(255,255,255,0.5)，不需要.png。

【参考方案3】：

你可以像这样设置你的外部 div

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

【参考方案4】：

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

【参考方案5】：

这可以通过一个技巧来完成，而且非常简单，方法如下：

你想把文本放在透明 div 之外，那就是让另一个 div 作为 position: relative;

【讨论】：

感谢您抽出宝贵时间提供答案。正是因为像您这样乐于助人的同龄人，我们才能作为一个社区一起学习。以下是一些关于如何使您的答案出色的提示：How do I write a good answer。