带有父对象的CSS不透明度

CSS Opacity With Parent Object

本文关键字：CSS 不透明度 对象      更新时间：2023-09-26

Hi我想弹出一个窗口，这样背景的不透明度为80%，但内部的子对象不会继承此属性，而是保持100%不透明和可见。如何编写css或javascript脚本以使其显示？类似于：


<div style=opacity:80>
     <div style=opacity:100>
          I want to make this text to not be partially transparent due from style inheritance
     </div>
</div>

有什么想法吗？感谢提前提供的任何帮助

干杯

这是有效的：

<div style='position:relative;width:WWW; height:HHH;'>
     <div style='opacity:80; position:absolute; top:0; left:0; width:WWW; height:HHH;'> <!-- cover -->
     <div>
          I want to make this text to not be partially transparent due from style inheritance
     </div>
</div>

永不终止！我找到了一个非常简单的解决方案：


<div style="background-color: rgba(0, 0, 0, 0.8)">
    <div style="background-color: rgba(255, 255, 255, 1.0); margin: 15px">
         This text is 100% OPAQUE with a white background and 80% opaque outer background! YAY!
    </div>
</div>

p.S.通过检查Twitter的源代码发现了这种方法

这里有两种可能性，按照灵活性先于简单性的顺序：

方法1:

创建一个无样式的DIV（DIV#1）。在其中创建第二个DIV（DIV#2），并根据需要设置背景、边界和不透明度。在DIV#2旁边创建第三个DIV，使用相对定位将其放置在DIV#1的顶部。把你的内容放在这个DIV里！

这种方法不能很好地工作，因为拉伸内容DIV并不能固有地拉伸背景DIV

方法2:

创建一个单独的DIV，但不要使用"不透明度"，而是使用RGBA值。简单地说，使用RGBA可以指定RGB值，然后指定alpha（透明度）级别，例如：

background: rgba(255,255,255,0.7);

您可以对背景、边框、文本使用RGBA，只要将子元素的颜色声明为不透明值就足以防止透明度的继承。

对于图像，使用大多数图像编辑软件在PNG中添加alpha层相对简单。请参阅您的手册。

制作这样的IE8及更早版本需要一个小的交叉浏览器shenaniganza，但这是另一个问题（也是答案）。

相关文章：