如何使用jQuery不透明度覆盖容器上的Div

Question

我有一个不透明度为0.3的容器

$('#containerFeatured').css('opacity',0.3)

事实是，当我尝试用图像覆盖DIV包裹时，不透明度会占用整个DIV。我尝试使用z-index但没有任何反应。

My example here

谢谢！

Answer 1

当您指定元素的不透明度（即div）时，该不透明度也将应用于其子元素。一个显而易见的方法是在div之外获取非透明内容并使用CSS定位。

Answer 2

除了将子元素移出并使用定位之外，您还可以使用30％不透明的PNG作为容器div的背景图像，然后您必须处理IE6。

Answer 3

你可以试试这个：

$(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')

你可能想要更多地调整身高，但实际上，这将会起到作用：）

Answer 4

我使用不透明的png作为背景，然后应用Unit Interactives PNG fix

http://labs.unitinteractive.com/unitpngfix.php

我认为这是最干净，最简单的解决方案。