叠加背景图像与RGBA背景颜色 [英] Overlay a background-image with an rgba background-color

问题描述

我有一个 DIV 与背景图片。我想用RGBA颜色（ RGBA（0,0,0,0.1）），当用户将鼠标悬停在div。

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，然后用preLOAD .the-DIV：悬停{背景：网址（下称新形象'）; } 。不过，我想只有一个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块的顶部的附加的彩色显示器 - 这意味着它也显示了对格内容的顶部，而不是只是在背景图像的顶部。这是好的，如果你的分区是空的，但如果不使用线性渐变这可能是一个更好的解决方案：

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>

请参阅小提琴。太糟糕了，梯度说明书目前一团糟。见<一href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Browser_compatibility\">compatibility表中，code以上应与一个值得注意的市场份额任何浏览器的工作 - 与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屋！