如何使用 jQuery opacity 在容器上覆盖 div答案

【问题标题】：How To Overlay a Div on a Container with jQuery opacity如何使用 jQuery opacity 在容器上覆盖 div
【发布时间】：2009-02-10 07:23:23
【问题描述】：

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

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

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

My example here

谢谢！

【问题讨论】：

我不确定你想要什么......你想让图像旋转的东西在绿色层之上吗？

标签： jquery html css

【解决方案1】：

当您指定元素（即 div）的不透明度时，该不透明度也将应用于其子元素。解决此问题的一个明显方法是将您的非透明内容放在 div 之外并使用 CSS 定位。

【讨论】：

酷。将最能帮助您的答案标记为“已接受”，这样该问题就不会显示为“未回答”。谢谢

【解决方案2】：

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

【讨论】：

这是最后一个选项，因为您希望保持页面的简洁性。谢谢。
嗯，使用这个选项，页面实际上会更简单（代码根本不会改变，只是添加背景图像而不是使用 opacity 属性）。这比将子元素移出并使用定位要简单。

【解决方案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')

您可能想要更多地调整高度，但本质上，这可以解决问题 :)

【讨论】：

它不起作用，伙计...它看起来是一个很好的解决方案，但我不知道它有什么问题，我的意思是我只知道 jQuery 基础知识。谢谢
哦，我忘了说：您需要删除#containerFeatured 上现有的背景颜色和不透明度 :) 我肯定会工作，因为我在 firebug 中测试过；)

【解决方案4】：

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

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

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

【讨论】：