CSS：背景图像上不透明度的背景色

我正在尝试将

背景图像

和

背景颜色

分配给一个div。有许多这样的答案（）以及将它们组合到

背景

中的解决方案：

background: rgba(255,0,0,0.5) url('http://placehold.it/100x100');

或使用单独的属性：

background-color: rgba(255,0,0,0.5);
background-image: url('http://placehold.it/100x100');

以上两种方法都不适用于我（在Firefox和Chrome中测试）-我很快看到了正确的背景颜色，然后它消失了，剩下的只是图像。出于某种原因，它起作用的是：

 background: linear-gradient(to bottom, rgba(255,0,0,0.5) 0%, rgba(255,0,0,0.5) 100%), url('http://placehold.it/100x100');

你知道为什么这些解决方案不起作用吗

---

更新为了更好地阐明我在寻找什么：div的颜色在不断变化，因此我需要能够使用javascript动态轻松地更新内联样式。我希望有一个使用标准背景属性的简单解决方案（就像2011年一样）。如果没有，我将设置一个线性渐变。它有点笨重，但似乎很好用

UPDATE2最后，我发现为背景图像设置渐变比设置背景颜色属性慢3倍。因为这是颜色选择器的一部分，所以它造成了无法接受的鼠标移动滞后。我最终使用了嵌套的div，并在外部div中保持图像不变，在内部div中更改颜色

下面是一个演示：

#第1部分{
高度：100px；
宽度：100px；
背景色：rgba（255,0,0,0.5）；
背景图像：url（'http://placehold.it/100x100');
}
#第二组{
高度：100px；
宽度：100px；
背景：线性梯度（至底部，rgba（255,0,0,0.5）0%，rgba（255,0,0,0.5）100%），url（'http://placehold.it/100x100');
}

您可以使用

#div1 {
 width: 100px;
 height: 100px;
 background: url('http://placehold.it/100x100') center center no-repeat;
 background-size: cover;
 }

 #div1:before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(255,0,0,0.5);
 }

---

尝试此代码

.background{
背景：url（'http://placehold.it/100x100');
位置：相对位置；
高度：100px；
宽度：100px；
}
.层{
背景色：rgba（75,86,160,0.7）；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

不能在同一元素中使用图像和颜色。

这不完全正确。您可以同时使用这两个选项，但如果图像与div的宽度和高度相同，则颜色不会显示出来，因为它位于图像后面。div的颜色不断变化，因此我需要能够使用javascript动态轻松地更新内联样式。我发布的使用渐变的解决方案将会更好。基于过去的回答，我希望有一个使用标准背景属性的解决方案。看起来自2011年公布答案以来，他们已经修改了规格。谢谢你的回答。是的，你是对的，它将同时显示这两个选项，但图像将显示在图像后面。感谢您的评论。下面的User@l3fty发表了评论“

您不能在同一元素中使用图像和颜色。

这不完全正确。您可以同时使用这两种颜色，但如果图像与div的宽度和高度相同，则颜色不会显示出来，因为它位于图像后面。”假设l3fty在该断言中是正确的，已内置不透明度的PNG图像可能适用于您尝试执行的操作。@anied-我已经更新了问题，以显示我尝试使用解决方案执行的操作（使用js在固定图像中动态更改颜色）。谢谢你的评论。虽然这没有回答如何在同一个控件上同时设置背景颜色和背景图像的问题，但由于性能原因，我最终使用了嵌套的div