Question

我正在尝试为div分配background-image和background-color。有很多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中的颜色。

这是一个演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

试用此代码

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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

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

2 个答案: