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中的显式不透明声明并做背景：rgba（0,0,0,0.4）;在css中只给出背景div较低的不透明度。在您的示例中，img和标题是背景div的子项，因此将具有与背景div相同的显式不透明度，并将显示灰色而不是黑色。为了使gif具有透明背景而不是白色，你必须确保gif本身在保存时具有透明背景，我建议将它放在更高的z-index上，以便它的alpha通道不会干扰背景的div alpha

css overlay使背景不透明

1 个答案: