指定父 div 不透明度但不影响子 HTML 元素答案

【问题标题】：Specify parent divs opacity but make it not affect children HTML elements指定父 div 不透明度但不影响子 HTML 元素
【发布时间】：2011-11-18 19:43:40
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

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

See here.

【讨论】：

【解决方案2】：

我想将此作为评论添加到 animuson 答案，但我还不能发布 cmets，所以我将其作为“答案”发布。 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 中使用。

【讨论】：

【解决方案3】：

很遗憾，这并没有像您预期的那样工作。其他样式有继承的价值 - 那么为什么不透明度呢？

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

创建具有宽度/高度的父 DIV（或其他块元素）你需要和位置：相对。
使用您的透明度值创建一个子 DIV，宽度/高度为 100% 和 position:absolute（也可能是 left/top: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>

【讨论】：

【解决方案4】：

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

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;

查看此示例了解更多信息

http://jsfiddle.net/epmcM/

您可以从这里生成您的 rgba 过滤器http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

【讨论】：