我知道这是一个非常旧的线程，但它显示在谷歌的顶部，所以这里有另一个选项。

它是纯CSS，不需要任何额外的HTML。

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

盒影特性的应用数量惊人。

background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(0,0,0,0.6) 0),url(images/image.jpg);

你也可以添加不透明度叠加颜色。

而不是做

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

你可以:

background: url('../img/bg/diagonalnoise.png');

然后为不透明度颜色创建一个新样式:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

将不透明度更改为低于1的任意数字。然后将此颜色样式设置为与图像相同的大小。它应该会起作用。

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

.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 */
}

从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类中没有其他元素，则需要为它定义宽度和高度