以下方法可用于解决您的问题：

CSS alpha透明度方法（在Internet Explorer 8中不起作用）：#div｛背景色：rgba（255,0,0.5）；｝根据您的选择使用透明的PNG图像作为背景。使用以下CSS代码片段创建一个跨浏览器的alpha透明背景。下面是一个#000000@0.4%不透明度的示例.div文件{背景：rgb（0,0,0）；背景：透明\9；背景：rgba（0,0,0,0.4）；filter:progid:DXImageTransform.Microsoft.gradient（startColorstr=#66000000，endColorstr=#66000000）；缩放：1；}.div:第n个子级（n）{过滤器：无；}

有关此技术的更多详细信息，请参阅这个，它有一个在线CSS生成器。

以下方法可用于解决您的问题：

CSS alpha透明度方法（在Internet Explorer 8中不起作用）：#div｛背景色：rgba（255,0,0.5）；｝根据您的选择使用透明的PNG图像作为背景。使用以下CSS代码片段创建一个跨浏览器的alpha透明背景。下面是一个#000000@0.4%不透明度的示例.div文件{背景：rgb（0,0,0）；背景：透明\9；背景：rgba（0,0,0,0.4）；filter:progid:DXImageTransform.Microsoft.gradient（startColorstr=#66000000，endColorstr=#66000000）；缩放：1；}.div:第n个子级（n）{过滤器：无；}

有关此技术的更多详细信息，请参阅这个，它有一个在线CSS生成器。

您可以使用伪元素：：before或：：after来获得半透明的背景，并且只需使用一个容器即可完成此操作。使用类似的方法：

<article>
  Text.
</article>

然后应用一些CSS：

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

例子：

正文{背景：红色；}文章{位置：相对；z指数：1；}文章：之前{内容：“”；位置：绝对；顶部：0；左：0；宽度：100%；高度：100px；不透明度：.4；z指数：-1；背景：url(https://31.media.tumblr.com/8ec07e49f33088c2e32c158ca4262eb2/tumblr_n5wav6Tz4R1st5lhmo1_1280.jpg);}<文章>文本</article>

注意：您可能需要调整z索引值。

只需确保前景的宽度和高度与背景相同，或者尝试使用顶部、底部、左侧和右侧的财产。

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="foreground"></div>
<div class="background"></div>

我会这样做

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS:

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

它应该会起作用。这是假设你需要有一个半透明的图像BTW，而不是一个颜色（你应该只使用rgba）。还假设你不能在Photoshop中预先改变图像的不透明度。

.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}