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

例如

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

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

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

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

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

使用如下插入阴影：

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

仅此而已：）

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

几乎所有这些答案都假设设计师想要纯色背景。如果设计师实际上想要一张照片作为背景，那么目前唯一真正的解决方案就是JavaScript，就像其他地方提到的jQueryTransify插件一样。

我们需要做的是加入CSS工作组讨论，让他们给我们一个背景不透明度属性！它应该与多背景功能一起工作。

CSS 3为您的问题提供了一个简单的解决方案。使用：

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

这里，rgba代表红色、绿色、蓝色和alpha值。由于255而获得绿色值，并且通过0.5α值获得半透明度。