Css 使用rgba背景色覆盖背景图像

我有一个带有背景图像的

div

。我想在用户悬停div时使用rgba颜色（

rgba（0,0,0,0.1）

）覆盖背景图像

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

我尝试了多种方法：

这个CSS：

{
背景图片：url（“the-image”）；
利润率：10px；
宽度：200px；
高度：80px；
}
#测试1：悬停{
背景色：rgba（0,0,0,0.1）；
}
#测试2：悬停{
背景：url（“the-image”）、rgba（0,0,0,0.1）；
}
#测试3：悬停{
背景：rgba（0,0,0,0.1）；
}

看

---

我看到的唯一选择是制作另一个图像，使用overlay，使用JavaScript预加载它，然后使用

。div:hover{background:url（'The-new-image'）；}

。但是，我想要一个只使用CSS的解决方案（更整洁；更少的HTTP请求；更少的硬盘）。有吗？

是的，有办法做到这一点。您可以在之后使用伪元素

，将块定位在背景图像的顶部。大概是这样的：

：after
的css如下所示：

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

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

编辑：

当您想将其应用于非空元素，并仅在背景上获得覆盖时，您可以通过对元素应用正的
z-index
，对
：after
应用负的
。大概是这样的：

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

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

更新后的fiddle:
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>

红色文本
.分区
{
背景图片：url（“image.png”）；
颜色：#f00；
利润率：10px；
宽度：200px；
高度：80px；
}
.部门：悬停
{
背景图像：线性渐变（到底部，rgba（0,0,0,0.1），rgba（0,0,0,0.1）），url（“image.png”）；
背景图像：-moz线性渐变（顶部，rgba（0,0,0,0.1），rgba（0,0,0,0.1）），url（“the image.png”）；
背景图像：-o-线性梯度（顶部，rgba（0,0,0,0.1），rgba（0,0,0,0.1）），url（“image.png”）；
背景图像：-ms线性渐变（顶部，rgba（0,0,0,0.1），rgba（0,0,0,0.1）），url（“image.png”）；
背景图像：-webkit渐变（线性、左上、左下、从（rgba（0,0,0,0.1））到（rgba（0,0,0,0.1））、url（“image.png”）；
背景图像：-webkit线性渐变（顶部，rgba（0,0,0,0.1），rgba（0,0,0,0.1）），url（“image.png”）；
}

看。太糟糕了，梯度规范目前一团糟。请参阅，上面的代码应该可以在任何具有显著市场份额的浏览器中使用——MSIE 9.0及更高版本除外

编辑（2017年3月）：到目前为止，网络的状态已经不那么混乱了。所以
线性渐变
（由Firefox和Internet Explorer支持）和
-webkit线性渐变
（由Chrome、Opera和Safari支持）就足够了，不再需要附加前缀版本。
理想情况下，background属性允许我们对各种背景进行分层，类似于中详细介绍的背景图像分层。不幸的是，至少在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像素图像

这是您的JSFIDLE，其中包含这些更改。（我还将图像换成了仍然存在于互联网上的图像）

/*工作方法*/
.着色图像{
背景：
/*顶部，透明红色，假渐变*/
线性梯度(
rgba（255,0,0,0.45），
rgba（255,0,0,0.45）
),
/*底部，图像*/
网址(https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg);
高度：1280px；
宽度：960px；
背景尺寸：封面；
}
.着色图像p{
颜色：#fff；
填充：100px；
}

Lorem ipsum dolor sit amet，奉献精英。实验室的区别在于，时间是平等的，真实的时间必须是平等的

我已经完成了以下工作：

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

以上将产生一个很好的不透明的蓝色覆盖
 这是一个很好的技巧，但不幸的是，该层也覆盖了文本，而不仅仅是背景图像。所以这只适用于空div。@WladimirPalant如果添加z索引，它仍然适用于非空元素。请参阅更新。代码片段不适用于我，也不符合OP的要求。您可以使用base64编码的1px x x 1px图像，以您想要的颜色对其进行轻微优化。只要使用一个编码的png，你就可以得到透明度和一切。base64图像的缺点是可读性差，快速更改并不容易。不过，您确实避免了为所有渐变规格增加5行。@RedEight:
-moz
和
-ms
版本应该不再是必需的，对于传统的WebKit表示法也是如此。我猜
-o
也没有必要，新的Opera版本是基于WebKit的。所以你真的只需要两行字。一个小小的杰姆式的回答。我今天使用它是因为它也适用于IE9。谢谢你，伙计。