用 rgba 背景颜色覆盖背景图像

Question

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

我想知道是否有一个 div 解决方案（即没有多个 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'); } .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 支持）行就足够了，不再需要额外的前缀版本。

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应用负z-index来实现。 像这样的东西：

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

和更新的小提琴： http : //jsfiddle.net/N2U6B/255/

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/

Answer 4

理想情况下，背景属性将允许我们将各种背景分层，类似于http://www.css3.info/preview/multiple-backgrounds/ 中详细介绍的背景图像分层。 不幸的是，至少在 Chrome (40.0.2214.115) 中，在 url() 图像背景旁边添加 rgba 背景似乎破坏了该属性。

我找到的解决方案是将 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/ （我还把图片换成了互联网上仍然存在的图片）

Answer 5

我已经得到以下工作：

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

以上将产生一个漂亮的不透明蓝色覆盖。