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

Question

我正在尝试将 background-image 和 background-color 分配给 div。有很多 SO 答案 (like this) 可以将它们组合到 background 中：

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 中更改颜色。

这是一个演示：

#div1 {
  height: 100px;
  width: 100px;
  background-color: rgba(255,0,0,0.5);
  background-image: url('http://placehold.it/100x100');
}

#div2 {
  height: 100px;
  width: 100px;
  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 id="div1">
</div>

<div id="div2">
</div>

Answer 1

试试这个代码

.background {
    background:url('http://placehold.it/100x100');
    position: relative;
    height: 100px;
  width: 100px;
}

.layer {
    background-color: rgba(75, 86, 160, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="background">
    <div class="layer">
    </div>
</div>

Answer 2

你可以使用，

#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);
 }