Question

您好我想制作一个弹出框，使背景的不透明度为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>

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

干杯

Answer 1

这有效：

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

Answer 2

没关系！我找到了一个非常简单的解决方案：


<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的源代码

找到了这个方法

Answer 3

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

方法1：

创建一个没有样式的DIV（DIV＃1）。在其中创建第二个DIV（DIV＃2），并根据需要设置背景，边框和不透明度。在DIV＃2旁边创建第三个DIV，使用相对定位将其置于DIV＃1之上。把你的内容放在这个DIV中！

此方法效果不佳，因为拉伸内容DIV并不会固有地拉伸背景DIV。

方法2：

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

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

您可以将RGBA用于背景，边框，文本，您可以将其命名为 - 并且只是将子元素的颜色声明为非透明值足以阻止透明度的继承。

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

需要一个小的crossbrowser shenaniganza来制作IE8和更早版本，但这是另一个问题（并回答。）

父对象的CSS不透明度

3 个答案: