z-index 和不透明度问题答案

【问题标题】：z-index and opacity issuesz-index 和不透明度问题
【发布时间】：2012-12-12 07:44:03
【问题描述】：

我正在尝试在我的所有 DIV 的后面制作一个包装器，该包装器将显示为透明（不透明度：0.6），但前面的所有内容也显示为透明。

任何想法如何解决这个问题？

您可以在此处找到示例：http://testing.squaretise.com/（我为包装器 (#wrap) 设置了一个红色边框，以便您更容易理解）

【问题讨论】：

你能贴一些代码吗？
能否请您发布代码？同时，为了了解z-index元素的堆叠顺序以及不透明度如何创建新的子堆叠上下文，您可以参考这篇文章：philipwalton.com/articles/what-no-one-told-you-about-z-index希望对您有所帮助。

【解决方案1】：

使用代替：

opacity: 0.6;

这个：

background: rgba(255, 255, 255, 0.6);

颜色为 RGB，最后一位数字表示透明度。

【讨论】：

【解决方案2】：

您甚至可以使用opacity 来实现。这是一个例子：

HTML

<div id="wrapper"> 
    <div id="contentOrWhatever">
    </div>
</div>

body {
    z-index:0;
}
#wrapper {
    z-index:1;
    opacity:0.6;
}
#contentOrWhatever {
    z-index:99;
    opacity:1;
}

所以#wrapper 现在是透明的，并且总是落后于#contentOrWhatever。希望能帮到你。

【讨论】：

【解决方案3】：

您应该使用透明背景，而不是不透明度。如果你想支持 IE8，背景图像是最好的方法。（CSS3 颜色：http://caniuse.com/#search=rgba）

使用 data-uri 以获得更好的性能。

【讨论】：

【解决方案4】：

不透明度是继承的。如果父母是透明的，那么孩子也是。

一个更好的方法是删除opacity并将背景颜色设置为透明：

.foo {
  background: rgba(0,0,0,.5);
}

【讨论】：

“不透明度是继承的” – 不，它不是（不是在 CSS 定义“继承”的意义上。）如果是，则具有 opacity: .5 的父级设置将意味着子级也将自动具有相同的值（如果它没有自己的值集），因此子级内容的不透明度将为.5 * .5 = .25 - 因为不透明度是相乘 .相反，子级的默认值为1，因此其内容获得与父级相同的 opcaity 值，.5 * 1 = .5

【解决方案5】：

你需要绝对定位你的透明 div。

【讨论】：