我通常在工作中使用这门课。很好。

.透明{过滤器：alpha（不透明度=50）；/*Internet Explorer*/-khtml不透明度：0.5；/*KHTML和旧Safari*/-moz不透明度：0.5；/*Firefox和Netscape*/不透明度：0.5；/*Firefox、Safari和Opera*/}

不久前，我在Cross Browser Background Transparency With CSS中写到了这一点。

奇怪的是，InternetExplorer6将允许您使背景透明，并使顶部的文本完全不透明。对于其他浏览器，我建议使用透明的PNG文件。

如果你使用的是Less，你可以使用褪色（颜色，30%）。

这是我能想到的最好的解决方案，不使用CSS 3。据我所知，它在Firefox、Chrome和Internet Explorer上运行得很好。

将一个容器div和两个子div放在同一级别，一个用于内容，另一个用于背景。使用CSS，自动调整背景大小以适应内容，并使用z索引将背景放在后面。

.容器{位置：相对；}.内容{位置：相对；颜色：白色；z指数：5；}.背景{位置：绝对；顶部：0px；左：0px；宽度：100%；高度：100%；背景色：黑色；z指数：1；/*这三行用于所有浏览器中的透明度*/-ms filter：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；过滤器：alpha（不透明度=50）；不透明度：.5；}<div class=“container”><div class=“content”>内容如下。<br/>背景应该适合。</div><div class=“background”></div></div>

<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/?

问题是，在您的示例中，文本实际上是完全不透明的。它在p标记内具有完全不透明性，但p标记只是半透明的。

您可以添加半透明的PNG背景图像，而不是在CSS中实现，或者将文本和div分离为两个元素，并将文本移动到框上（例如，负边距）。

否则就不可能了。

正如Chris所提到的：如果你使用一个具有透明度的PNG文件，你必须使用JavaScript解决方法来让它在烦人的Internet Explorer中工作。。。