z指数问题不确定现在该怎么办

Question

如何使h1和img元素"出现"在它们所包含的不透明div的顶部?我的意思是，我如何让他们看起来没有受到他们父母不透明的影响?

操纵:

<div id="main">
<div id="seethru">
       <img ... />
       <h1>hi</h1>
    </div>
</div>
#main { 
   background-color: green;
}
#seethru { 
   width: auto; 
   height: auto; 
   opacity: 0.4; 
   background-color: blue; 
}
#seethru img, h1 { 
   position: relative; 
   z-index: 9999; 
   color: white; 
}

到目前为止没有任何工作，我不能分离这个内容，它必须在不透明的div

Answer 1

您正在使用opacity属性，这将使它的子元素也不透明，所以为了防止使用rgba(0, 0, 255, .4)，这将防止子元素变得不透明。

rgba的解释:rgba()只是纯粹的rgb(red, green, blue)，但a的附加参数是alpha，只是不透明度，所以当你处理背景颜色时，你可以使用它作为替代

有一些变通方法可以防止子元素变得不透明，例如

有关浏览器支持rgba的详细信息(对于IE，您可以使用CSS3 Pie)

注意:当你使用background-color: rgba()时，一定要记住使用a使用hex或纯rgb声明退色，以便不支持的浏览器至少可以渲染基本色但是如果没有不透明度，你也可以使用透明png作为背景与background-repeat属性(但这是90年代的方式做);)

正如@Adrift评论的那样，你可以在这里阅读，为什么实际上子元素也变得不透明

Answer 2

IE8以下的ie浏览器不支持RGBA颜色。因此，如果您将h1和img元素放在不透明的div之外，然后使用CSS定位将其视觉上移动到内部会更好。

看看这个很棒的教程，它一定会解决你的问题。

http://www.tutorialrepublic.com/css-tutorial/css-opacity.php