Question

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

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

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

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

Answer 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.

Answer 2

我想将此添加为对animuson答案的评论，但我还不能发表评论，所以我只是将其作为“答案”发布。 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完全避免这个问题。第一个是transparant背景，第二个是内容，位于第一个。它不是很整洁，它不是很好，而且我不能说它对它很满意，但是......它甚至适用于IE7和IE6。

Answer 3

不幸的是，这并不像你预期的那样有效。其他样式具有继承的价值 - 为什么不透明？

如果你没有做太复杂的事情，那就有一个解决办法：

使用width / height创建父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>

Answer 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/

您可以从http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

生成rgba过滤器

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

4 个答案:

http://jsfiddle.net/epmcM/