您可以通过（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;
}

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

问题是，在您的示例中，文本实际上是完全不透明的。它在p标记内具有完全不透明性，但p标记只是半透明的。

您可以添加半透明的PNG背景图像，而不是在CSS中实现，或者将文本和div分离为两个元素，并将文本移动到框上（例如，负边距）。

否则就不可能了。

正如Chris所提到的：如果你使用一个具有透明度的PNG文件，你必须使用JavaScript解决方法来让它在烦人的Internet Explorer中工作。。。

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

如果你是一个Photoshop爱好者，你也可以使用：

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

Or:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

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

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