Question

如何让h1和img元素“出现在”它们所包含的不透明div的顶部？我的意思是，我如何让它看起来不受父母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，只有不透明度，所以你可以用它作为处理背景颜色时的另一种选择

Demo

有些解决方法可以防止子元素变得不透明，example

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

注意：当您使用background-color: rgba()时，请记住使用使用hex或纯rgb声明后退颜色不支持的浏览器不会失败至少渲染基色但是没有不透明度，你也可以使用透明的png作为具有background-repeat属性的背景（但这是90年代的方式 do）;）

作为@Adrift Commented，您可以阅读here，为什么子元素实际上也变得不透明

Answer 2

IE8的Internet Explorer不支持RGBA颜色。因此，如果将h1和img元素放在不透明div之外，然后使用CSS定位在内部移动它会更好。

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

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

Z-index问题不确定现在该做什么

2 个答案: