我认为这将为您提供所需的输出：

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

我通常在工作中使用这门课。很好。

.透明{过滤器：alpha（不透明度=50）；/*Internet Explorer*/-khtml不透明度：0.5；/*KHTML和旧Safari*/-moz不透明度：0.5；/*Firefox和Netscape*/不透明度：0.5；/*Firefox、Safari和Opera*/}

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

使用如下插入阴影：

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

仅此而已：）

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

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

实例

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

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

最好使用半透明.png。

只需打开Photoshop，创建一个2x2像素的图像（选择1x1可能会导致Internet Explorer错误！），用绿色填充，并将“图层选项卡”中的不透明度设置为60%。然后保存它并使其成为背景图像：

<p style="background: url(green.png);">any text</p>

当然，它很酷，除了在可爱的InternetExplorer6中。有更好的修复方法可用，但这里有一个快速破解方法：

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}