Javascript 指定父divs不透明度，但不影响子HTML元素

我在div中有一个段落元素。div的不透明度为0.3，而段落的不透明度为1

当我显示元素时，段落看起来是透明的，就像它的不透明度为0.3一样

有没有办法使div中的段落完全不透明？也许我可以为此设置CSS值？

<div style="opacity: 0.3; background-color: red;">
   <p style="opacity: 1;">abcde</p>
</div>

abcde

您不能，不透明度级别始终相对于父级的不透明度。所以0.3内的1.0是0.3的100%，即0.3，0.3内的0.5是0.3的50%，即0.15。如果只对背景色使用不透明度，可以使用RGBA方法指定颜色，使红色不透明，而不是内容（以及其中的段落）

abcde

---

这很简单，你要做的就是给予

background: rgba(255,0,0,0.3)

&对于IE，请使用此过滤器

background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000,endColorstr=#4CFF0000)"; /* IE8 */    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000,endColorstr=#4CFF0000);   /* IE6 & 7 */      
zoom: 1;

查看此示例了解更多信息

---

你可以从这里生成你的rgba过滤器

我想将此作为评论添加到animuson answer中，但我还不能发表评论，所以我将其作为“答案”发布。RGBa工作得很好，但只适用于新浏览器。甚至IE8也不支持它，这是一个严重的挫折，因为很多很多人仍然使用IE8

.color-block {
/* The Fallback Color */
background: rgb(200, 54, 54);

/* The Important Bit - Alpha Transparency */ 
background: rgba(200, 54, 54, 0.5); 
}

请阅读更多信息

---

我通常使用两个div来完全避免这个问题。第一个用于透明背景，第二个用于内容，位于第一个背景的正上方。它不整洁，不好看，我不能说我对它很满意，但是。。。它甚至可以在IE7和IE6中工作。

不幸的是，它并没有像您预期的那样工作。其他样式有一个“继承”值-那么为什么不使用“不透明度”

如果你不做任何太复杂的事情，有一个解决办法：

• 创建具有宽度/高度的父DIV（或其他块元素） 你需要和位置：相对

• 使用透明度值创建一个子DIV，宽度/高度为 100%和位置：绝对（也可能是左/顶：0）

• 创建另一个子DIV，将内容和不透明度设置为 你要什么都行

例如：

<div style="width:200px;height:100px;position:relative">
    <div style="opacity:.03;background-color:blue;width:100%;height:100%;position:absolute;left:0;top:0"></div>
    <div style="opacity:.09">This is my content</div>
</div>

这是我的内容

<div style="width:200px;height:100px;position:relative">
    <div style="opacity:.03;background-color:blue;width:100%;height:100%;position:absolute;left:0;top:0"></div>
    <div style="opacity:.09">This is my content</div>
</div>