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

问题描述

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

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,

这里是我的意思： / p>

Here's what I mean:

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

CSS将是：

#outer {
  opacity: 0.5;
}

#inner {
  opacity: 1.0;
}

我尝试了，但不起作用。

I tried that, but it doesn't work.

请帮助

回复

推荐答案

一个简单和兼容的解决方案是删除所有不透明度，并使用：

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)
}

• 支持 rgba 的浏览器将使用第二个背景声明 rgba 。


• 浏览器忽略第二个 background 声明并使用 .png 。


• 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.

另一种方法详述如下：

这篇关于当父容器的透明度为50时，如何保持文本不透明度100的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！