Html css覆盖使背景不透明

我有这个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中的图像和文本完全不不透明

---

正如davidpauljunior建议的那样，您必须删除css中的显式不透明度声明，并执行背景：rgba（0,0,0,0.4）；在css中，仅为背景div提供较低的不透明度。在您的示例中，img和header是background div的子对象，因此将具有与background div相同的显式不透明度，并且将显示灰色而不是黑色。要使gif具有透明背景而不是白色背景，您必须确保保存时gif本身具有透明背景，我建议将其置于更高的z索引上，以便其alpha通道不会干扰背景的div alpha。

我不理解您所说的“完全不不透明”是什么意思。你是说你希望背景是透明的，但img和h1是完全不透明的（根本看不透）？或者你真的想让img和h1完全透明？父对象的不透明度会影响所有子对象。尝试使用alpha透明度：

背景：rgba（0,0,0,0.4）