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

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 {

    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));

    background-blend-mode: overlay;

}

请注意，IE / Edge完全不支持CSS混合模式。