2

我如何使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 内

4

2 回答 2

7

您使用的opacity属性也会使其子元素不透明，因此为了防止这种使用rgba(0, 0, 255, .4)，这将防止子元素变得不透明。

rgba对:的解释rgba()不过是纯rgb(red, green, blue)的，但有一个附加参数a是 alpha，除了不透明度之外什么都没有，所以在处理背景颜色时可以使用它作为替代

演示

例如，很少有解决方法可以防止子元素变得不透明

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

注意：当您使用时，请background-color: rgba()始终记住使用使用 ahex或 pure声明的后备颜色rgb，以便不支持的浏览器不会无法渲染至少基色但没有不透明度，或者您也可以使用透明 png 作为背景background-repeat财产（但这是 90 年代的做法）；）

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

于 2013-05-22T04:12:59.037 回答
0

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

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

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

于 2013-05-22T04:26:01.713 回答