实施例

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

Answer 1

像pmsf说的那样，这是不可能的。如果您正在寻找一种使背景颜色或颜色透明的方法，您可以尝试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);
}

Answer 2

不，你不能

不透明度完全是从父亲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放在父亲身上，而是将其放在副本上。

Answer 3

不，不是严格意义上你在询问。因为正在发生的事情不是真正，这个值在任何传统意义上都是继承的，但是子控件是部分透明的，因为它是在部分透明容器内的直接效果。 / p>

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

所以这不起作用：

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

有一些警告，但这是达到你想要的唯一好方法。

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

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

我会说，在人们开始说绝对定位是解决设计问题的可怕方式之前，有一种情况我觉得它是完全合法的：在处理position: relative时在上面的示例中，并且基于绝对定位元素，而不是整个窗口。

Answer 4

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

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

Answer 5

你可以避免父子不透明继承，但它会很hacky： 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);

不透明度是否在div中是不存在的

实施例

5 个答案: