这里有一个jQuery插件Transify（Transify-一个jQueryplugin，可以轻松地将透明度/不透明度应用于元素的背景），它可以为您处理所有事情。

我时不时地遇到这个问题，所以我决定写一些能让生活更轻松的东西。该脚本小于2KB，只需要一行代码就可以运行，如果您愿意，它还可以处理背景的不透明度动画。

有一个技巧可以最小化标记：使用伪元素作为背景，可以在不影响主元素及其子元素的情况下设置其不透明度：

DEMO

输出：

相关代码：

p型{位置：相对；}p： 之后{内容：“”；位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；背景：#fff；-ms filter：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；不透明度：.6；z指数：-1；}/***以下仅适用于演示样式***/正文{背景：url（'http://i.imgur.com/k8BtMvj.jpg'）不重复；背景尺寸：封面；}p型{宽度：50%；填充：1em；保证金：10%自动；字体系列：arial，serif；颜色：#000；}国际货币基金组织{显示：块；最大宽度：90%；边距：.6em自动；}<p>Lorem ipsum dolor坐amet，consectetur adipiscing elit。不要用舌头骚扰。<img src=“http://i.imgur.com/hPLqUtN.jpg“alt=”“/></p>

浏览器支持Internet Explorer 8和更高版本。

伪元素不透明度

当使用#AARGGBB格式时，它对我有效，因此对我有效的格式是#1C00ff00。试试看，因为我看到它对某些人有效，而对其他人无效。我在CSS中使用它。

背景色：rgba（255，0，0，0.5）；如上所述，简单地说就是最好的答案。即使在2013年，使用CSS3也不简单，因为不同浏览器的支持水平会随着每次迭代而变化。

虽然所有主要浏览器都支持背景色（CSS 3并不陌生）[1]，但alpha透明度可能很棘手，尤其是在版本9之前的Internet Explorer以及版本5.1之前的Safari浏览器上的边框颜色。[2]

使用Compass或SASS这样的工具确实有助于生产和跨平台兼容性。

[1] W3Schools:CSS背景色属性

[2] Norman的博客：浏览器支持清单CSS3（2012年10月）

<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/?

这是我能想到的最好的解决方案，不使用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>