如何修复父级中的透明 div 子项

Question

我有 CSS 声明下面：

#loadingBox-holder
{
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    top:0;
    filter: alpha(opacity=30);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    opacity:0.7;
    -moz-opacity: 0.7; 
    z-index: 1000;
    background-color:#000;
}
#loadingBox
{
    position: fixed;
    left: 40%;
    top: 50%;
    z-index: 1000;
    height: 36px;
    width: 138px;
    border:1px solid #ccc;
    background:#fff !important;
    padding:5px 5px 10px 10px;
    opacity:100;
    /*-moz-opacity: 100 !important; */
}

和 HTML：

<div id="loadingBox-holder" style="">
                <div id="loadingBox">
                    <p>Please wait...</p>
                    <img src="../Images/loading.gif" alt="" />
                </div>
            </div>

上面的代码是一个懒惰的指示器。我的问题是加载箱保持是灰色透明的，但我希望加载箱是正常的而不是传输的。我添加下面的css：

filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
opacity:1;
-moz-opacity: 1;

然而，子div仍然是透明的。

我的错误在哪里以及如何解决？

谢谢！

Answer 1

如果您

使用的是position fixed那么将loadBox移出支架不会对最终输出产生任何影响，它将解决您的不透明度问题。

<div id="loadingBox-holder" style="">
</div> 
<div id="loadingBox">
    <p>Please wait...</p>
</div>
​

演示