css覆盖使背景不透明

Question

我有这个CSS代码：

.overlay {
    background:#666666;
    opacity:0.7;
    filter: alpha(opacity=70);
    position:fixed;
    width:100%;
    height:100%;
    text-align:center;
    top:0px;
    left:0px;
    z-index:1000;
}

这使得我的div适合整个页面并且是不透明的。

下面是我的html：

<div id="overlay" class="overlay">
     <img src="http://www.example.com/images/loading.gif" alt="Loading" width="25%" style="margin-top:5%;" />
     <br />
     <h1>Loading...</h1>
</div>

我怎样才能保持css的原样，同时又不让div中的图像和文本不透明呢？

http://jsfiddle.net/4rvrt/

Answer 1

正如davidpauljunior建议的那样，你必须在css中删除不透明度的显式声明，并在css中执行background:rgba(0,0,0,0.4)；，以便只给出背景div较低的不透明度。在您的示例中，img和header是背景div的子级，因此将具有与背景div相同的显式不透明度，并将显示为灰色而不是黑色。为了让gif有一个透明的背景而不是白色，你必须确保gif本身在保存时有一个透明的背景，我建议把它放在一个更高的z索引上，这样它的alpha通道就不会干扰背景的div alpha。