使用半透明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>

您可以通过（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')";

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

例如

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

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

使用半透明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>

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

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

我同意以上所有的答案，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;
  }