从css技巧…有一个一步的方法来做到这一点，没有z索引和添加伪元素-需要线性梯度，我认为这意味着你需要CSS3支持

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}

下面就是:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML:

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

当然，如果.background类中没有其他元素，则需要为它定义宽度和高度

试试这个。对我有用。

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}

当你无法控制图像颜色配置文件时，我使用这种方法来为图像应用颜色色调和渐变，使动态叠加文本更容易形成风格，以提高可读性。不用担心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);
  }

希望能有所帮助

实际上，我使用:之前以不同的方式，我只使用一个HTML元素<div>，只使用一个CSS类名和使用伪元素技巧:

.background { /* ↓↓↓ the decorative CSS */ font-family: tahoma; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-radius: 8px; overflow: hidden; /* ↓↓↓ the main CSS */ position: relative; background: url('https://picsum.photos/id/355/600/400') no-repeat center / cover; z-index: 1; } .background:before { /* ↓↓↓ the main CSS */ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, 0.5); z-index: -1; } .text { /* ↓↓↓ the decorative CSS */ font-size: 20px; color: #072252; } <div class="background"> <span class="text">Some child</span> <span class="text"></span> </div>

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

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