使用background-blend-mode进行简单着色

可以使用background-blend-mode css属性：

.box {
  width: 300px;
  height: 300px;
  background-size: cover;
  background-image: url('https://placehold.co/300');
}

.background-tint {
  background-color: rgba(200,100,0,.5);
  background-blend-mode: multiply;
}

<div class="box background-tint"></div>

把它放在任何有背景图像的元素上，你就可以开始了。
该属性在现代浏览器中得到了很好的支持，不支持包括IE 11。对于不支持的浏览器，您可以使用polyfill。

• • 一个月一次**

其他选项

使用filter进行复杂色调

可以使用filter css属性：
一个二个一个一个
把它放在任何有背景图片的元素上，你就可以开始了。为了改变颜色，改变hue-rotate的值。
该属性在现代浏览器中得到了很好的支持不支持，包括IE 11。

• • 一个月四个月**

使用平坦线性渐变和多重背景叠加

.background-tint {
  background-image: 
    linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
    url('http://placehold.it/420')
}

我认为这是最广泛使用的技术，但它有硬编码的缺点，也就是说，你不能只取一个类，把它粘在一个元素上，然后进行着色。
你可以把它做成一个比较简单的混音，比如：

• • 一个月五个月一个月**

.background-tint(@tint-color, @image-url) {
  background-image: 
    linear-gradient( @tint-color, @tint-color ),
    url( @image-url )
}

• • 一米六米一x**

@mixin background-tint($tint_color, $image_url) {
  background-image: 
    linear-gradient( $tint_color, $tint_color ),
    url( $image_url )
}

• • 第一个e五个f第一个x**

使用透明背景

这个方法的优点是可以在大多数浏览器上工作，并且是一个可以添加到任何元素的很好的类，缺点是如果你在那个元素中有任何其他内容，你必须将它 Package 在一个div中，并带有某种定位position: relative将是最好的。
示例：

.box {
  width: 300px; height: 300px;
  background-size: cover;
  background-image: url('http://placehold.it/300');
  color: #facebc;
}

.background-tint { position: relative; }

.background-tint::after {
  content: "";
  position: absolute; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  margin: auto;
}

.u-relative { position: relative; z-index: 1; }

<div class="box background-tint">
    <div class="u-relative">300 x 300</div>
  </div>

• • 一个月一次**

我认为你需要创建一个覆盖元素（可能是div），它具有所需的半透明背景。

.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}

当然，还有一个小演示：little link .

这对我来说非常有效：
https://css-tricks.com/tinted-images-multiple-backgrounds/

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

根据另一个答案，你可以用现有的颜色来做这件事，比如：

linear-gradient(
  fade(@brand-primary, 50%),
  fade(@brand-primary, 50%)
),

可能是overlay属性https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay但这只是个草稿，不要依赖它

尝试不透明度：

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

在我看来，这是解决这个问题最简单的办法.

.parent-div{
     background-color : desired-color
}
#image-id{
     opacity: dersired_value%
}

要增加背景色的可读性：黑色和不透明度百分比在50%到60%的范围内似乎工作得很好。