子 div 的不透明度是不是可以高于具有 css 的父级？

Posted

技术标签:

【中文标题】子 div 的不透明度是不是可以高于具有 css 的父级？【英文标题】：Can a child div have a higher opacity than parent with css?子 div 的不透明度是否可以高于具有 css 的父级？ 【发布时间】：2012-04-17 19:15:48 【问题描述】：

我在页面主体上有一个背景，它是我想通过第一级 div 而不是第二级显示的图像

<body>
      <div style='opacity:0.9;'><p>This is a wrapper that shows some of the background</p>
          <div style='background-color:#fff;'><p>This is a child div that I want to be all white</p>
          </div>
      </div>
</body>

显然二级 div 也获得了 0.9 的不透明度，有没有办法覆盖它？

【问题讨论】：

这应该会有所帮助。 css-tricks.com/… 简单的答案是否定的：你需要想办法绕过它。 I do not want to inherit the child opacity from the parent in CSS的可能重复 【参考方案1】：

其中任何一个都可以帮助您入门：

Answer 1

Answer 2

【讨论】：

【参考方案2】：

你好，你可以这样做

您可以定义父 opicity

和你一样的孩子

例如。

css

.parent
    padding:20px;
    background:rgba(112,81,246,0.3);

.child
    padding:20px;
    background:rgba(112,81,246,0.6);

​

HTML

<div class="parent">
<div class="child">Hello i m child</div>
</div>​

现场演示http://jsfiddle.net/rohitazad/PC4sL/

【讨论】：

以上是关于子 div 的不透明度是不是可以高于具有 css 的父级？的主要内容，如果未能解决你的问题，请参考以下文章

CSS - 低不透明度div上的不透明文本？

带有彩色背景的不透明文本 - 仅限 CSS

如何在不影响带有 html/css 的子元素的情况下应用不透明度？

CSS 内部边框，带有背景图像的div上的不透明度

如何创建具有不透明度的父 div，同时将文本的不透明度保持在 100% [重复]

a:hover 的不透明度过渡不起作用