如何在背景图片上添加颜色叠加？

Question

在SO和Web上，我都经常看到这个问题。但是它们都不是我要找的东西。

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

HTML示例：

<div class="testclass">

</div>

CSS示例：

.testclass {

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

}

请注意：

我想仅通过使用CSS来解决此问题。即我不想在颜色叠加的div“ testclass”内添加子div。

这不应该是“悬停效果”，我只想向背景图像添加色彩过渡。

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

我正在寻找一种颜色，让我们说黑色。不是渐变。

这可能吗？（如果没有，我会感到惊讶，但我对此一无所获），如果是的话，实现这一目标的最佳方法是什么？

所有的建议和意见表示赞赏！

Answer 1

background-image 接受多个值。因此，仅1种颜色线性渐变的组合css blend modes就可以解决问题。.testclass {&nbsp; &nbsp; background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));&nbsp; &nbsp; background-blend-mode: overlay;}请注意，IE / Edge完全不支持CSS混合模式。