我有一个通过 CSS 设置的背景图像。

html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}

我计划为网站的不同页面使用不同的背景图像：因此，其上的文本清晰易读非常重要。现在，我的 #main 内容框中间有一个半透明的黑色背景，如下所示，以确保易读性：

#main {
background: rgba(0, 0, 0, 0.5);
}

不过，我真正想做的是在整个背景图像上拥有那种半透明的背景，因为黑框看起来有点笨重。我尝试过制作一个<div id=#tint>其中包括整个 HTML 文档，并将 rgba(0, 0, 0, 0.5) 赋予 #tint，但这根本不起作用——我要么什么都不做，要么我可以让整个背景变成一个简单的灰色，根本看不到背景图像。这根本不可能吗？

Use background-blend-mode简单的色调

您可以使用background-blend-mode https://caniuse.com/css-backgroundblendmodeCSS 属性：

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

将其放置在任何带有背景图像的元素上，然后就可以开始了。

现代浏览器很好地支持该属性NOT包括 IE 11。对于不支持的浏览器，您可以使用polyfill https://github.com/idevsoftware/js-background-blend-mode.

工作演示 https://jsbin.com/cesekucumu/edit?css,output

其他选项

Use filter对于复杂的色调

您可以使用filter https://caniuse.com/css-backgroundblendmodeCSS 属性：

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

.background-tint {
  filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(330deg);
}

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

将其放置在任何带有背景图像的元素上，然后就可以开始了。 为了改变颜色改变hue-rotate value.

现代浏览器很好地支持该属性NOT包括 IE 11。

工作演示 https://jsbin.com/bageqiriko/edit?css,output

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

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

我认为这是使用最广泛的技术，但它有硬编码的缺点，即您不能只上一堂课，将其粘贴在元素上并进行着色。

你可以将其制作成 less 或 sass mixin，例如：

less

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

sass

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

工作演示 https://jsbin.com/zibiqaneme/edit?css,output

使用透明背景

此方法的优点是适用于大多数浏览器，并且是添加到任何元素的一个很好的类。 缺点是，如果该元素内还有其他内容，则必须将其包装在具有某种定位的 div 中position: relative效果最好。

Example:

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

工作演示 https://jsbin.com/mitocewuse/1/edit?css,output