Question

嘿，我有这个显示为弹出窗口的div：

<div class="popup">
</div>

然后使用jquery我添加另一个类来为它提供与该类，位置，大小，颜色和透明度相关联的css：

.show {
    position: absolute;
    color: #F4F5F6;
    width: 600px;
    margin-left: -300px;
    height:300px;
    background: #000000;
    left:50%;
    top:200px;

    filter:alpha(opacity=95); 
    -moz-opacity: 0.95; 
    opacity: 0.95;
}

我的问题是：

我正在为div添加文字和图片。

结束如：

<div class="popup show">
    <div class="image">
      <img scr="blabla.png">
    </div>
    <div class="text">
      ble ble ble
    </div>
</div>

我的问题如下，即使我在这里覆盖了不透明度：

div.image
{
    position: relative;
    float:left;
    width:202;
    height:402;
    filter:alpha(opacity=100); 
        -moz-opacity: 1; 
        opacity: 1; 
}

图像仍然具有透明度。

无论如何都要覆盖不透明度值而不必将图像div放在弹出式div之外？

Answer 1

试试这个：

div.image
{
position: relative;
float:left;
width:202;
height:402;
filter:alpha(opacity=100) !important; 
    -moz-opacity: 1 !important; 
    opacity: 1 !important; 
}

http://www.w3.org/TR/CSS2/cascade.html#important-rules

编辑：对不起;我以前甚至遇到过这种情况并且没有树枝。我认为嵌套元素的最大不透明度与外部元素的不透明度相同;你永远不会比你的父元素更不透明！最后我检查了这是一个正确的CSS问题，我不知道解决方法。

作为一种解决方法，您可以尝试不进行嵌套，但使用一些ucnning定位技巧。

Answer 2

由于'.show'类的不透明度为95％，所以它的后代也是如此。这很不幸，但这就是不透明的效果。只要他们仍然真正留下后代，后代就无法克服他们祖先的不透明。

您必须使用半透明的png设置'.show'背景，或者将结果设置为某些尴尬的html（请参阅：Non-Transparent Elements Inside Transparent Elements）

不要试图生涩，但this Google search（或类似的东西）可能有帮助

透明的div问题

2 个答案: