opacity - 如何修复 parent 的透明div child ？

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>

上面的代码是一个加载指示器。我的问题是 loadingBox-hold 是灰色透明的，但我希望 loadingBox 是正常的而不是透明的。我在下面添加了 CSS:

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

但是子 div 仍然是透明的。

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

谢谢!

Answer 1

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

<div id="loadingBox-holder" style="">
</div> 

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

DEMO