用RGBBA背景色覆盖背景图片

Question

我有div一个background-image。rgba(0,0,0,0.1)当用户悬停div时，我想用rgba颜色（）覆盖背景图像。

我想知道是否有一个一格解决方案（即没有多个div，一个用于图像，一个用于颜色，等等）。

我尝试了多种方法：

<div class="the-div" id="test-1"></div>
<div class="the-div" id="test-2"></div>
<div class="the-div" id="test-3"></div>

而这个CSS：

.the-div {
    background-image: url('the-image');
    margin: 10px;
    width: 200px;
    height: 80px;
}

#test-1:hover {
    background-color: rgba(0,0,0,0.1);
}

#test-2:hover {
    background: url('the-image'), rgba(0,0,0,0.1);
}

#test-3:hover {
    background: rgba(0,0,0,0.1);
}

我看到的唯一选择是制作另一个具有覆盖层的图像，使用JavaScript预加载然后使用.the-div:hover { background: url('the-new-image'); }。但是，我想要一个仅CSS的解决方案（更整洁；更少的HTTP请求；更少的硬盘）。有没有？

Answer 1

PeterVR的解决方案的缺点是，额外的颜色会显示在整个HTML块的顶部，这意味着它还会显示在div内容的顶部，而不仅仅是背景图像的顶部。如果div为空，这很好，但是如果不使用线性渐变，则可能是一个更好的解决方案：

<div class="the-div">Red text</div>

<style type="text/css">
  .the-div
  {
    background-image: url("the-image.png");
    color: #f00;
    margin: 10px;
    width: 200px;
    height: 80px;
  }
  .the-div:hover
  {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url("the-image.png");
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png");
  }
</style>

以上代码应可在任何具有明显市场份额的浏览器中使用-MSIE 9.0及更低版本除外。

编辑 （2017年3月）：到目前为止，网络的状态已经变得越来越混乱。因此linear-gradient（受Firefox和Internet
Explorer -webkit-linear-gradient支持）和（受Chrome，Opera和Safari支持）行就足够了，不再需要其他带前缀的版本。