如何使用 jQuery 不透明度在容器上覆盖 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/531352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To Overlay a Div on a Container with jQuery opacity
提问by euge1979
I have a Container with Opacity 0.3
我有一个不透明度为 0.3 的容器
$('#containerFeatured').css('opacity',0.3)
The fact is that when I try to overlay a DIV wrap with images the opacity takes the whole DIV. I tried with z-index but nothing happens.
事实是，当我尝试用图像覆盖 DIV 包装时，不透明度会占据整个 DIV。我尝试使用 z-index 但没有任何反应。
Thank you!
谢谢！
回答by euge1979
When you specify the opacity of an element (i.e. div), that opacity will apply to its child elements too. An obvious way around this is to get your non-transparent content outside of the div and use CSS positioning.
当您指定元素（即 div）的不透明度时，该不透明度也将应用于其子元素。解决此问题的一个明显方法是将非透明内容放在 div 之外并使用 CSS 定位。
回答by benmmc
Other than moving the child elements out and using positioning, You could also use a PNG that is 30% opaque as the background image of the container div, however then you gotta deal with IE6.
除了将子元素移出并使用定位之外，您还可以使用 30% 不透明的 PNG 作为容器 div 的背景图像，但是您必须处理 IE6。
回答by Ionu? Staicu
You could try this:
你可以试试这个：
$(document.createElement('div'))
.width($('#containerFeatured').width())
.height($('#containerFeatured').height())
.css({backgroundColor:'white', opacity:0.4, position:'absolute',left:0, top:0})
.prependTo($('#containerFeatured'))
$('#containerFeatured').css('position','relative')
You may want to tweak height more, but essentially, will do the trick :)
您可能想要更多地调整高度，但基本上，可以解决问题:)
回答by gargantuan
I use an opaque png for the background, then apply Unit Interactives PNG fix
我使用不透明的 png 作为背景，然后应用 Unit Interactives PNG 修复
http://labs.unitinteractive.com/unitpngfix.php
http://labs.unitinteractive.com/unitpngfix.php
I think that's the cleanest, simplest solution.
我认为这是最干净、最简单的解决方案。
