不透明度是否在 div 中继承答案

【问题标题】：Is Opacity is INHERITED in a div不透明度是否在 div 中继承
【发布时间】：2011-02-07 21:00:50
【问题描述】：

是否可以将opacity从父级继承到其子级div？

示例

<style type="text/css">
.parent {
 opacity:.5;
}
.parent div {
 opacity:1; /* I want this to override the ".5", but instead it combines */
}
</style>
<div class="parent"><div></div></div>

【问题讨论】：

标签： css opacity

【解决方案1】：

您可以避免父子不透明度继承，但它会很麻烦： http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

还有一个插件可以完成这项工作，名为：thatsNotYoChild.js。

在 HTML5 中，您还可以使用 RGBA 设置不继承透明度 (alpha) 的背景颜色。

示例：

/* Black with 75% transparency */
background-color: rgba(0, 0, 0, 0.25);

【讨论】：

【解决方案2】：

创建一个透明的 PNG 并将其应用为父类的background，而不是使用opacity。

有关演示，请参阅Twitter's layout（特别是主要内容周围的背景/边框）。

【讨论】：

【解决方案3】：

不可以

不透明度完全继承自父亲的 div。

意思：

#father{
 opacity: 0.5;
}

#child{
 opacity: 0.9; /* actualy means opacity 0.5*0.9 == 0.45 of opacity value */
}

编辑：

如果你想欺骗它但保留你透明父亲的“工作流程”。您可以将父亲 div 的副本（大小和位置）放在父亲的顶部。

#father, #copy{
your css here
opacity: 0.5;
}

#copy{
   opacity: 1;
   background: transparent;
   z-index: 1000; /* or one more than the father */
}

现在不要把你的非透明 HTML 放在父亲身上，把它放在副本上。

【讨论】：

您必须注意，在大多数（所有？）情况下，您必须将父亲和副本置于彼此之上（堆叠在 Z 轴上） - 大多数时间使用 position: absolute。

【解决方案4】：

不，不是严格意义上的您所询问的。因为发生的事情并不是真的该值在任何传统意义上都是继承的，而是子控件是部分透明的，因为它是在一个部分透明的容器中的直接效果。

你可以在很多情况下解决它。

所以这行不通：

<div id="parent" style="opacity: 0.5; background-color: red;">
    <div id="child" style="opacity: 1"> Still just 50% visible </div>
</div>

但你可以这样做：

<div id="wrapper" style="position: relative;">
    <div id="parent" style="position: absolute; top: 0; left: 0; opacity: 0.5; background-color: red; width: 100%;"> &nbsp; </div>
    <div id="child" style="position: absolute; top: 0; left: 0;"> This will be 100% visible </div>
</div>

有一些注意事项，但这是实现您想要的唯一好方法。

在这个例子中，我正在处理一行文本，在“父级”中，我包括一个&nbsp;，它也将占据一行的高度。如果你的“孩子”身高更高，“父母”就不会长大，因为它根本就不是父母。您必须手动设置高度。

您还必须手动指定宽度，因为您正在处理绝对定位的元素。

我会说，尽管如此，在人们开始说绝对定位是解决设计问题的一种糟糕方法之前，有一次我认为它是完全合法的：当同时处理 position: relative 时，如上面的例子，并根据 that 来绝对定位一个元素，而不是在整个窗口上。

【讨论】：

这将是 100% 可见的

我只是嵌套了两个，然后我该如何克服这个问题？
@Jean：你不应该嵌套它们。您应该完全按照示例中的方式将它们堆叠在一起。 jsbin.com/uciwo3
但是我想嵌套它们，我可以在没有上面覆盖显示的情况下进行不透明度
在我的建议中，您可以将它们嵌套在“parent_copy div”中
#parent, #child{ } #child{} 你在说什么？

【解决方案5】：

就像 fmsf 所说，这是不可能的。如果您正在寻找一种使背景颜色或颜色透明的方法，您可以尝试 rgba。这在 IE6 中不受支持。

#my_element {
  /* ie6 fallback - no opacity */
  background-color:rgb(255, 255, 255);

  /* rgba(red, green, blue, alpha); */
  background-color:rgba(255,255,255,0.5);
}

【讨论】：