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是正常的而不是transprent。我在下面添加了css：

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

然而，孩子div仍然透明。

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

谢谢！

Answer 1

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

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

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

DEMO

如何在父母中修复透明的div孩子？

1 个答案: