最好使用半透明.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');
}

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

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

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

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

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

当使用#AARGGBB格式时，它对我有效，因此对我有效的格式是#1C00ff00。试试看，因为我看到它对某些人有效，而对其他人无效。我在CSS中使用它。

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

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;   
}

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

例如

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

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