使用rgba背景颜色覆盖背景图像 [英] Overlay a background-image with an rgba background-color

问题描述

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

I have a div with a background-image. I want to overlay the background-image with an rgba color (rgba(0,0,0,0.1)) when the user hovers the div.

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

I was wondering if there's a one-div solution (i.e. not with multiple divs, one for the image and one for the color, etc.).

我尝试过多种操作：

<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请求;更少的硬盘）。有什么？

The only option I saw is to make another image, with overlay, preload it using JavaScript and then use .the-div:hover { background: url('the-new-image'); }. However, I'd like a CSS-only solution (neater; less HTTP requests; less harddisk). Is there any?

推荐答案

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

The solution by PeterVR has the disadvantage that the additional color displays on top of the entire HTML block - meaning that it also shows up on top of div content, not just on top of the background image. This is fine if your div is empty, but if it is not using a linear gradient might be a better solution:

<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及更早版本。

See fiddle. Too bad that gradient specifications are currently a mess. See compatibility table, the code above should work in any browser with a noteworthy market share - with the exception of MSIE 9.0 and older.

这篇关于使用rgba背景颜色覆盖背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！