受不透明度影响的元素的堆叠顺序
如何z-index与opacity决定在HTML堆叠元素的订单时，有关系吗？
当我保持opacity小于1由具有一些元件上z-index的发言权999。元素落后于没有元素的元素z-index。
$(function() {
$("#checkbox1").on("change", function() {
$("#green-parent").toggleClass("add-opacity", this.checked);
});
});
.green,
.blue {
position: absolute;
width: 100px;
line-height: 100px;
text-align: center;
color: white;
}
.green {
z-index: 999999999;
top: 50px;
left: 50px;
background: green;
}
.blue {
top: 60px;
left: 90px;
background: blue;
}
.add-opacity {
opacity: 0.99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="checkbox1" type="checkbox" value="1">
<label for="checkbox1">Add opacity to green box parent</label>
<div id="green-parent">
<span class="green">Green</span>
</div>
<div>
<span class="blue">Blue</span>
</div>
问题答案：
具有“自动”以外的z索引值的定位元素和不透明度值小于1的元素将生成堆叠上下文。请参阅有关喷漆顺序的规则。
在您的第一个示例中，我们具有带有多个后代的根堆栈上下文，包括：
- 定位的Z-index为正的绿色框
- 带有
autoz-index的蓝色框
带有autoz-index 的蓝色框位于后面；Z索引为正的绿色框位于前面（请参见规则8和9）。
在您的第二个示例中，我们有：
- 具有不透明度的元素（包含绿色框；请注意，绿色框上的z-index对该元素而言是局部的）
- 没有z-index的定位蓝色框
这两个要素属于同一类别（见规则8）。在这种情况下，HTML顺序确定哪个元素出现在前面。蓝色框按源顺序显示在后面，因此它出现在前面。
-
本文向大家介绍五现在想调节一下父元素的透明度，但是又不影响子元素的透明度，怎么破？相关面试题，主要包含被问及五现在想调节一下父元素的透明度，但是又不影响子元素的透明度，怎么破？时的应答技巧和注意事项，需要的朋友参考一下 方法1：用RGBA 方法2：再加一层与父元素同级的div装载子元素 定位到子元素原位置
-
问题内容： 在上面的示例中，的不透明度由子元素继承，导致文本几乎变得不可读。我想说它是继承的是错误的，不透明度应用于父div，而子元素是其中的一部分，因此尝试从子元素覆盖它是行不通的，因为从技术上讲，它们是不透明的。 在这种情况下，我通常只使用alpha png背景图像，但是今天我想知道是否有更好的方法可以使div的背景半透明而不影响内容。 问题答案： 您可以使用rgba（）。 要使其在旧的Int
-
问题内容： 我有一个不透明度为0.8 的 容器 。在背景上，我的图像通过内容div发光。现在，我在此 容器中 有我的客户的照片。问题在于，它使用父元素的不透明度，因为此图像的不透明度只是相对于容器而不是相对于主体。 我有以下代码： 如下所述，这不起作用。 有人知道吗？ 问题答案： 通过将其更改为以下内容解决了此问题： 仅使用rgba alpha而不是不透明度。现在可以了。
-
问题内容： 嘿，我正在Google搜寻，但我找不到完美的答案 我想在父级DIV中设置不透明度，但在子级DIV中不设置透明度 例 的HTML CSS 注： - 我想 背景图像 中没有颜色 问题答案： 如果您在伪类中定义 背景图像 ，可能会很好。这样写：
-
问题内容： 我想为父级应用不透明度，但是我不希望子元素继承这种不透明度。 有没有办法“取消”继承的不透明度？也许将其强制用于子元素？ 问题答案： 如果孩子的不透明度为1，则孩子的不透明度将始终是父对象的不透明度。 继承不是问题，而是不透明度的计算方式。 例如， 从您的角度来看，的不透明度与的不透明度相同，但实际上是的不透明度的两倍。 避免这种情况的唯一方法是将孩子移出父母。另外，根据您的需要，也可
-
问题内容： 我想在不影响IE 8中包含元素的情况下设置div背景的不透明度。有任何解决方案，并且不回答设置1 X 1 .png图像并设置该图像的不透明度，因为我使用的是动态不透明度，并且颜色管理可以更改那 我用过但在IE 8中无法使用 和 也。 问题答案： 该风格的影响在它整个元素和一切。正确的答案是改用rgba背景色。 CSS非常简单： …前三个数字是背景色的红色，绿色和蓝色值，第四个数字是“