这里有一个更简单的技巧，只有css。

<div class="background"> </div> <style> .background { position:relative; height:50px; background-color: rgba(248, 247, 216, 0.7); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); } .background:after { content:" "; background-color:inherit; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>

请访问https://stackoverflow.com/a/18471979/193494查看我的回答，了解可能的解决方案的全面概述:

使用线性渐变的多个背景， 多个背景与生成的PNG，或 样式化:在伪元素之后作为次要背景层。

使用前伪类和使用不透明度

.left-side {
  position: relative;
  background-color: #5200ff; /*bg color*/
}

.left-side::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(./images/img.jpeg);  /*bg image*/
  background-size: cover;
  background-position: 100%;
  opacity: 0.22;  /*use opacity to show bg color */
}

当你无法控制图像颜色配置文件时，我使用这种方法来为图像应用颜色色调和渐变，使动态叠加文本更容易形成风格，以提高可读性。不用担心z指数。

HTML

<div class="background-image"></div>

SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

希望能有所帮助

这里有一个更简单的技巧，只有css。

<div class="background"> </div> <style> .background { position:relative; height:50px; background-color: rgba(248, 247, 216, 0.7); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); } .background:after { content:" "; background-color:inherit; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>

我只是在目标背景div上使用background-image css属性。 注意background-image只接受渐变颜色函数。 所以我使用线性渐变添加相同的叠加颜色两次(使用最后的rgba值来控制颜色不透明度)。

此外，还找到了以下两个有用的资源:

在背景图像上添加文本(或任何其他内容的div):英雄图像 只模糊背景图像，不模糊上面的div:模糊背景图像

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}