Javascript 父对象的CSS不透明度

嗨，我想创建一个弹出窗口，这样背景的不透明度为80%，但内部子对象不继承此属性，并保持100%不透明和可见。我将如何编写css或javascript脚本使其出现？比如：

<div style=opacity:80>
     <div style=opacity:100>
          I want to make this text to not be partially transparent due from style inheritance
     </div>
</div>

由于样式继承，我希望使此文本不具有部分透明性

有什么想法吗？提前谢谢你的帮助

干杯
这很有效：

<div style='position:relative;width:WWW; height:HHH;'>
     <div style='opacity:80; position:absolute; top:0; left:0; width:WWW; height:HHH;'> <!-- cover -->
     <div>
          I want to make this text to not be partially transparent due from style inheritance
     </div>
</div>


由于样式继承，我希望使此文本不具有部分透明性
这项工作：

<div style='position:relative;width:WWW; height:HHH;'>
     <div style='opacity:80; position:absolute; top:0; left:0; width:WWW; height:HHH;'> <!-- cover -->
     <div>
          I want to make this text to not be partially transparent due from style inheritance
     </div>
</div>


由于样式继承，我希望使此文本不具有部分透明性
别客气！我找到了一个非常简单的解决方案：


<div style="background-color: rgba(0, 0, 0, 0.8)">
    <div style="background-color: rgba(255, 255, 255, 1.0); margin: 15px">
         This text is 100% OPAQUE with a white background and 80% opaque outer background! YAY!
    </div>
</div>

此文本是100%不透明的白色背景和80%不透明的外部背景！耶！

p.S.通过检查Twitter的源代码发现了这种方法
无所谓！我找到了一个非常简单的解决方案：


<div style="background-color: rgba(0, 0, 0, 0.8)">
    <div style="background-color: rgba(255, 255, 255, 1.0); margin: 15px">
         This text is 100% OPAQUE with a white background and 80% opaque outer background! YAY!
    </div>
</div>

此文本是100%不透明的白色背景和80%不透明的外部背景！耶！

p.S.通过检查Twitter的源代码发现了这种方法，这里有两种可能性，一种是灵活性，另一种是简单性：

方法1:

创建一个未设置样式的DIV（DIV#1）。在其内部创建第二个DIV（DIV#2），并根据需要设置背景、边框和不透明度。在DIV#2旁边创建第三个DIV，使用相对定位将其放置在DIV#1的顶部。把你的内容放在这个DIV里

这种方法不能很好地工作，因为拉伸content DIV本身并不拉伸background DIV

方法2:

创建一个单独的DIV，但不使用不透明度，而是使用RGBA值。简单地说，使用RGBA可以指定RGB值，然后指定alpha（透明度）级别，例如：

background: rgba(255,255,255,0.7);

您可以对背景、边框、文本使用RGBA，只要将子元素的颜色声明为非透明值就足以防止透明度的继承

对于图像，使用大多数图像编辑软件向PNG添加alpha层相对简单。查阅您的手册

IE8和更早版本需要一点交叉浏览器shenaniganza，但这是另一个问题（和答案）。
这里有两种可能性，先灵活后简单：

方法1:

创建一个未设置样式的DIV（DIV#1）。在其内部创建第二个DIV（DIV#2），并根据需要设置背景、边框和不透明度。在DIV#2旁边创建第三个DIV，使用相对定位将其放置在DIV#1的顶部。把你的内容放在这个DIV里

这种方法不能很好地工作，因为拉伸content DIV本身并不拉伸background DIV

方法2:

创建一个单独的DIV，但不使用不透明度，而是使用RGBA值。简单地说，使用RGBA可以指定RGB值，然后指定alpha（透明度）级别，例如：

background: rgba(255,255,255,0.7);

您可以对背景、边框、文本使用RGBA，只要将子元素的颜色声明为非透明值就足以防止透明度的继承

对于图像，使用大多数图像编辑软件向PNG添加alpha层相对简单。查阅您的手册

IE8和更早版本需要一点交叉浏览器shenaniganza，但这是另一个问题（和答案）。
所有库都是这样做的。回答得好。这是我做这件事的一种方式，但看看我刚刚从下面的twitter源代码中发现了什么！我知道，但实际上有时没有其他解决办法。这很有趣，我收到了-1，因为我看到的每个知名插件都在这样做：-\n他们在很多库的背景上使用这种方法屏蔽，这是一个很好的解决办法，直到不支持CSS 3的浏览器消失。所有库都是这样做的。回答得好。这是我做这件事的一种方式，但看看我刚刚从下面的twitter源代码中发现了什么！我知道，但实际上有时没有其他解决办法。很有趣，我收到了-1，因为我看到的每个知名插件都在这样做：-\n他们在很多库的背景上使用这种方法屏蔽，这是一个很好的解决办法，直到不支持CSS 3的浏览器消失。rgba只是HTML 5，不幸的是，IE7还没有死。rgba不是HTML5，它是CSS。如果你想保持HTML的美观和语义，它要么是这个，要么是一个透明的PNG背景。（假设用
p
元素或类似元素替换内部
div
）是的，我尝试了透明png，但当你使用更改不透明度级别时，它不起作用rgba仅是HTML 5，你会遇到IE 7的问题，不幸的是，IE 7还没有死。rgba不是HTML 5，它是CSS，或者一个透明的PNG背景，如果你想保持HTML的美观和语义。（假设您使用
p
元素或类似元素替换内部
div
）是的，我尝试了透明png，但当您使用更改不透明度级别时，它不起作用