8

是否可以删除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>
4

5 回答 5

17

就像 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);
}
于 2010-04-14T11:34:09.890 回答
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 放在父亲身上，而是将其放在副本上。

于 2010-04-14T11:27:18.797 回答
3

不，不是严格意义上的你要询问。因为发生的事情并不是真正继承了任何传统意义上的值，而是子控件是部分透明的，这是在部分透明的容器中的直接影响。

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

所以这行不通：

<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像上面的例子一样处理时，绝对基于那个定位一个元素，而不是在整个窗口上。

于 2010-04-14T11:37:46.373 回答
2

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

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

于 2012-05-07T00:40:12.860 回答
0

您可以避免父子不透明度继承，但它会很麻烦： 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);
于 2014-02-28T13:33:52.320 回答