在网页上设置不透明度时,我遇到了一个非常奇怪的问题。具有不透明度的元素会遮挡页面上的其他元素。这种情况发生在 Safari、Chrome 和 Firefox 中。不透明度在 IE7 和 8 中被忽略。未在 IE9 上测试。

Fiddle

<style>
   #content { opacity: .92; background: #dfd; height: 300px;}
   #sidebar { width: 200px; float: right; background: #fdd; height: 200px; }
</style>
<div id="sidebar"></div>
<div id="content"></div>

去除不透明度会恢复预期的行为。另一个可能的解决方法是使用 rgba 背景值而不是不透明度。

有人遇到过这种情况么?如果是这样,你是如何解决的?

最佳答案

这个问题是已知的。
https://www.google.com/#q=opacity%20change%20z-index

您应该使用 rgba 背景,这也是一个广泛支持的属性。

关于css - 可能的不透明度 Z 索引错误,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15558148/

10-13 01:45