使用rgba背景色覆盖背景图片

Question

我有一个带有background-image的

。当用户悬停在

上时，我想用一个 rgba 颜色（rgba(0,0,0,0.1)）覆盖 background-image。

我想知道是否有一种只有一个

的解决方案（即不需要多个

，一个用于图像，另一个用于颜色等）。

我尝试了多种方法：

<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的解决方案(更加整洁; 请求较少; 减少硬盘开销)。是否有任何方法?

- user1544337

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）两行就足够了，不再需要其他前缀版本。

- Wladimir Palant

---

你可以通过使用一个base64编码的1像素乘1像素的图像来稍微优化它，颜色可以自己选择。只需使用编码后的png格式即可获得透明度和其他所有效果。但是，base64图像的缺点是可读性较差，而且快速更改不容易。不过，这样做可以避免为所有渐变规范添加5行额外代码。 - RedEight

@RedEight：-moz和-ms版本现在应该不再需要，同样适用于旧版WebKit的符号。我猜-o也不再需要了，因为新版Opera基于WebKit。所以你只需要两行代码。 - Wladimir Palant

@RedEight 谢谢，我也是这么想的，直到我看到你的回答，现在我绝对知道它应该被删除。 - GrowLoad

Answer 2

是的，有一种方法可以实现此目的。您可以使用伪元素after来定位一个块在背景图像上方。例如：

http://jsfiddle.net/Pevara/N2U6B/

:after的CSS如下：

#the-div:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

编辑：
如果你想将此应用于非空元素，并仅在背景上获取叠加效果，可以将正数 z-index 应用于该元素，将负数应用于 :after。类似下面这样：

#the-div {
    ...
    z-index: 1;
}
#the-div:hover:after {
    ...
    z-index: -1;
}

这是更新后的代码: http://jsfiddle.net/N2U6B/255/

- Pevara

---

这个技巧很不错，但不幸的是，这个图层会覆盖文本和背景图片，因此它只适用于空的 div 元素。 - Wladimir Palant

@WladimirPalant 如果你添加了z-index，它仍然适用于非空元素。请参见更新。 - Pevara

Answer 3

/* Working method */
.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg);
    height: 1280px;
    width: 960px;
    background-size: cover;
}

.tinted-image p {
    color: #fff;
    padding: 100px;
  }

<div class="tinted-image">
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam distinctio, temporibus tempora a eveniet quas  qui veritatis sunt perferendis harum!</p>
  
</div>

来源：https://css-tricks.com/tinted-images-multiple-backgrounds/

本文介绍了如何使用CSS多重背景和滤镜来创建带有色彩遮罩的图像。通过添加透明度和不同的混合模式，可以创建出各种效果。同时，还提供了一些实用技巧和注意事项，例如如何在不影响性能的情况下优化代码。

- pgrono

---

这段代码片段对我来说不起作用，并且没有实现OP想要的功能。 - Sajib Acharya

Answer 4

我已经让以下内容起作用了：

html {
  background:
      linear-gradient(rgba(0,184,255,0.45),rgba(0,184,255,0.45)),
      url('bgimage.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

以上代码将生成一个漂亮的不透明蓝色叠加层。

- guero64

Answer 5

理想情况下，背景属性应该允许我们像在http://www.css3.info/preview/multiple-backgrounds/中详细介绍的背景图层一样叠加各种背景。不幸的是，在Chrome（40.0.2214.115）中，添加rgba背景和url()图像背景似乎会破坏该属性。

我发现的解决方案是将rgba图层呈现为一个1px * 1px的Base64编码图像，并内联它。

.the-div:hover {
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgkAQAABwAGkn5GOoAAAAASUVORK5CYII=), url("the-image.png");
}

对于base64编码的1*1像素图像，我使用了http://px64.net/

这里是已经进行修改的jsfiddle示例。http://jsfiddle.net/325Ft/49/（我还将图片替换成了一个仍然存在于互联网上的图片）

- RedEight

---

你得到了一个小宝石般的答案。我最终使用了这个，因为它在IE9中也可以工作。谢谢啊。 - igneosaur