使用半透明PNG或SVG图像或使用CSS：

background-color: rgba(255, 0, 0, 0.5);

这是一篇来自css3.info、Opacity、RGBA和妥协（2007-06-03）的文章。

注意，一旦底层背景穿透，文本仍然需要与背景形成足够的对比。

<p style=“背景色：rgba（255，0，0，0.5）；”><span>你好，世界</span></p>

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

由于很多人会来到这里，想知道如何调整任何元素（而不仅仅是背景）的不透明度，所以只需在该元素的CSS中添加不透明度：0.2（或您希望的0到1之间的任何数字）即可。

实例

.myclass {
  color: #eb4746;
  opacity: 0.2;
}

这可以用于背景、标题、段落等。

您可以通过（ab）使用渐变语法为Internet Explorer 8解决此问题。颜色格式为ARGB。如果使用Sass预处理器，可以使用内置函数“ie-hex-str（）”转换颜色。

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

我同意以上所有的答案，rgba是正确的选择。在我的例子中，我以编程方式提供了一个十六进制背景，因此我必须基于十六进制代码生成自己的rgba。我创建了唐先生答案的修改版本，将十六进制转换为rgba

function hexToRgba(hex,alpha) {
    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
      return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    if(result!=null){
      const r = parseInt(result[1], 16);
      const g = parseInt(result[2], 16);
      const b = parseInt(result[3], 16);
      //
      return `rgba(${r},${g},${b},${alpha})`;

    }
    return null;
  }

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