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

<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中预先改变图像的不透明度。

您可以使用Sass的transparentize。

我发现它是最有用、最容易使用的。

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6) 

查看更多：#transparentize（$color，$amount）⇒ Sass:：脚本：：值：：颜色

子级继承不透明度。如果他们不这样做，那会很奇怪，也很不方便。

您可以使用半透明的PNG文件作为背景图像，也可以使用RGBa（a代表alpha）颜色作为背景颜色。

例如，50%褪色的黑色背景：

<div style=“background-color:rgba（0，0，0）；”>＜div＞已添加文本。</div></div>

.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)";}

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

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