我在 div 中有一个段落元素。div 的不透明度为 0.3，段落的不透明度为 1。
当我显示元素时，段落看起来是透明的，就像它的不透明度为 0.3。
有没有办法让div内的段落完全不透明？也许我可以为此设置一个 CSS 值？
<div style="opacity: 0.3; background-color: red;">
<p style="opacity: 1;">abcde</p>
</div>
指定父 div 不透明度但不影响子 HTML 元素
IT技术
javascript
html
css
2021-02-25 14:00:12
4个回答
你不能，不透明度级别总是相对于父级的不透明度。因此，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>
我想将此添加为 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 来完全规避这个问题。第一个用于透明背景，第二个用于内容，位于第一个的正上方。它不整洁，不好看，我不能说我对它很满意，但是......它甚至可以在 IE7 和 IE6 中工作。
不幸的是，这并不像您预期的那样工作。其他样式具有继承value - 那么为什么不透明度呢？
如果你没有做任何太复杂的事情，有一个解决方法：
创建具有所需宽度/高度和位置的父 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>
很简单，你要做的就是给予
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/