如何向背景图像添加颜色叠加？ [复制]

我在 SO 和 Web 上都看到过很多这个问题。但它们都不是我要寻找的。

如何仅使用 CSS 将颜色叠加添加到背景图像？

HTML 示例：

<div class="testclass">
</div>

CSS 示例：

.testclass {
    background-image: url("../img/img.jpg");
}

请注意：

• 我想只使用 CSS 来解决这个问题。即我不想在 div“testclass”中添加子 div 以进行颜色叠加。

• 这不应该是“悬停效果”，我只想简单地向背景图像添加颜色叠加。

• 我希望能够使用不透明度，即我正在寻找允许 RGBA 颜色的解决方案。

• 我只寻找一种颜色，比如说黑色。不是渐变。

这可能吗？ （如果没有，我会感到惊讶，但我还没有找到任何有关此的信息），如果是的话，完成此任务的最佳方法是什么？

感谢所有建议和建议！

我看到两个简单的选择：

• 图像上具有半透明单一渐变的多个背景
• 巨大的插入阴影

渐变选项：

    html {
      min-height:100%;
      background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(https://picsum.photos/id/1043/800/600);
      background-size:cover;
    }

阴影选项：

html {
  min-height: 100%;
  background: url(https://picsum.photos/id/1043/800/600);
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

an old codepen http://codepen.io/gc-nomade/pen/wouBe我的例子很少

第三种选择

• 使用背景混合模式 https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode :

The background-blend-modeCSS 属性设置元素的背景图像应如何相互混合以及与元素的背景颜色混合。

html {
  min-height: 100%;
  background: url(https://picsum.photos/id/1043/800/600) rgba(255, 0, 150, 0.3);
  background-size: cover;
  background-blend-mode: multiply;
}