Question

在大多数浏览器中，当html元素仅部分不透明时，其子元素会“继承”此不透明度。（它不是完全继承 - 更准确地说，整个图像被组装，包括父和它的子项递归，然后不透明度应用于整个事物。）

在IE8中（我也假设IE的早期版本），这并不总是与不透明度有关。如果子元素的位置为：static（默认情况下，如果没有指定位置），那么它就像我上面描述的那样工作。然而，似乎情况是，如果将位置设置为任何其他（例如，绝对或相对），则子元素是完全不透明的。

我想知道如何使不透明度正确影响父元素和子元素，但仍然保持子元素的位置：absolute;

以下是问题的一个示例。下面的代码应该是一个半透明的灰色框，在一个垂直的红色条顶部有一个半透明的蓝色周围区域。在Firefox，Chrome等上，这是实际看到的。在IE8上，蓝色框是正确半透明的，但灰色部分是不透明的。

<!doctype html>
<html>
  <head>
    <style>
      div.parentElem
      {
        background-color:#0000ff;
        position: absolute;
        left:75px;
        top:75px;
        width:300px;
        height:225px;        
        opacity:0.5;
        filter:alpha(opacity=50);
      }
      div.childElem
      {
        background-color:#808080;
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
      }
      div.redBar
      {
        position: absolute;
        left:150px;
        top:50px;
        height:350px;
        width:25px;
        background-color: #ff0000;        
      }
    </style>
  </head>
  <body>
    <div class="redBar"></div>
    <div class="parentElem">
      <div class="childElem"></div>
    </div>
  </body>
</html>

显然，这只是一个玩具示例 - 我本来可以有一个蓝色边框和灰色背景的div来达到预期的效果。在真实场景中，我正在分层几个不同的div，每个div都有一个png背景图像来动态构建图像。

我的第一个尝试解决方法是通过将子项上的过滤器设置为alpha（opacity = 50），对父项和子项应用不透明度;或者只是设置过滤器：inherit;。这不能达到预期的效果，因为它在它上面形成一个半透明的灰色矩形的半透明蓝色矩形。中间的空白区域最终是半透明的蓝色灰色，而它应该是半透明的灰色。同样，它不能使元素兄弟姐妹。任何解决方案都需要在对任何事物应用任何透明度之前组合两个图像。

在我的研究中，我发现了一些应用缩放的建议：1;或者浮动：无;内部元素可能会解决问题，但对我来说都不起作用。

我最终的解决方法是给子元素位置：static。这是一个丑陋的解决方案，但我将它应用于上面的示例是将子元素的样式更改为：

  div.childElem
  {
    background-color:#808080;
    position:static;
    margin-left:10px; 
    margin-right:10px;
    height:205px;
    margin-top:10px;
  }

这是一种丑陋的解决方案，因为这意味着我必须知道物体的高度。另外，在我正在编写几个不同的png的实际情况中，我希望它们是逻辑兄弟，我必须将它们全部放在嵌套的父子孙子等中。关系。它还可以防止我添加任何文本元素，除了在堆栈的最顶部（最里面的div），而不会弄乱定位。但它确实有效，并且在所有浏览器中看起来都一样。

有没有办法避免这种可怕的解决方法，并且不透明度正确地影响子元素而不会使位置静止？谢谢！

Answer 1

div.parentElem *{filter:inherit;}

请参阅：

http://seanmonstar.com/post/709013028/ie-opacity-ignores-positioned-children

Answer 2

除了div.childElem的高度外，还指定宽度。在你的情况下：

width:280px;

可能与好的'hasLayout。

有关

Answer 3

由于只有IE了解filter规则，当您知道它们的位置时，您可以在子元素上使用它... 我找不到“正确的”解决方案= /

Answer 4

我能够找到一种方法让不透明度正确地适用于绝对定位的孩子。当我给页面没有任何doctype时，不正确地应用了不透明度。实际上，因为这会迫使浏览器进入怪癖模式，这通常不是一个可行的解决方案。

Answer 5

对您的问题进行细微修正。这种奇怪的行为在IE8中只发生。 IE7和IE9都显示预期的行为（其中子元素首先覆盖在父元素上，然后整个复合组应用了过滤器）。当父元素是position：relative（以及子元素是绝对的或相对的）时，IE8也会被破坏。

Answer 6

简答：在子元素上设置所需不透明度的alpha过滤器。

以下是一个详细的解释和示例： http://jacklmoore.com/notes/ie-opacity-inheritance/

Answer 7

我在

方面取得了一些成功

selector {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    z-index: -1;
}

我正在使用-1，因为它似乎没有像z-index那样混淆z-ordering，但是从我发现的，任何非auto / inherit / 0 z-索引有效。

是否有任何方法可以将不透明度应用于ie8中绝对定位的子元素

7 个答案: