问指定父div不透明度，但使其不影响子HTML元素

EN

您不能，不透明度级别总是相对于父对象的不透明度。所以0.3里面的1.0是0.3的100%，0.3是0.3的0.5，0.3里面的0.5是0.3的50%，0.3是0.15。如果只使用不透明度作为背景颜色，则可以使用RGBA方法指定颜色，这样红色将是不透明的，而不是内容(以及其中的段落)。

<div style="background-color: rgba(255, 0, 0, 0.3);">
   <p>abcde</p>
</div>

See here.

我想把这个作为评论添加到animuson answer中，但我还不能发表评论，所以我只是把它作为一个'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); 
}

有关更多信息，请阅读http://css-tricks.com/examples/RGBaSupport/。

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

不幸的是，这并不像您期望的那样工作。其他样式都有继承值-那么为什么不透明没有呢？

如果你不想做太复杂的事情，有一个变通的办法：

• 创建一个具有所需宽度/高度的父DIV (或其他块元素)，并使用您的透明度值、宽度/高度为100%和位置:绝对(可能也是左/上:0)创建一个子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>