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

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

背景色：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月）

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

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和更高版本。

伪元素不透明度

为了使元素的背景半透明，但使元素的内容（文本和图像）不透明，您需要为该图像编写CSS代码，并且必须添加一个名为opacity的最小值属性。

例如

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

//值越小，透明度越高，或者值越低，透明度越低。

有一个更简单的解决方案是在同一个分区上的图像上放置一个覆盖层。这不是该工具的正确用法。但是，使用CSS制作覆盖层就像一种魅力。

使用如下插入阴影：

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

仅此而已：）

不透明度的背景，但不是文本有一些想法。要么使用半透明图像，要么覆盖其他元素。