CSS 用 rgba 背景颜色覆盖背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17134929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overlay a background-image with an rgba background-color
提问by
I have a divwith 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一个background-image. rgba(0,0,0,0.1)当用户将鼠标悬停在 div 上时，我想用 rgba 颜色 ( )覆盖背景图像。
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 解决方案（即没有多个 div，一个用于图像，一个用于颜色等）。
I tried multiple things:
我尝试了多种方法：
<div class="the-div" id="test-1"></div>
<div class="the-div" id="test-2"></div>
<div class="the-div" id="test-3"></div>
And this CSS:
这个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);
}
See this fiddle.
看到这个小提琴。
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?
我看到的唯一选择是制作另一个带有叠加层的图像，使用 JavaScript 预加载它，然后使用.the-div:hover { background: url('the-new-image'); }. 但是，我想要一个仅使用 CSS 的解决方案（更简洁；更少的 HTTP 请求；更少的硬盘）。有没有？
采纳答案by Wladimir Palant
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:
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>
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.
见小提琴。太糟糕了，梯度规范目前一团糟。请参阅兼容性表，上面的代码应该适用于任何具有显着市场份额的浏览器 - 除了 MSIE 9.0 及更早版本。
Edit(March 2017): The state of the web got far less messy by now. So the linear-gradient(supported by Firefox and Internet Explorer) and -webkit-linear-gradient(supported by Chrome, Opera and Safari) lines are sufficient, additional prefixed versions are no longer necessary.
编辑（2017 年 3 月）：现在网络的状态变得不那么混乱了。因此linear-gradient（Firefox 和 Internet Explorer-webkit-linear-gradient支持）和（Chrome、Opera 和 Safari 支持）行就足够了，不再需要额外的前缀版本。
回答by Pevara
Yes, there is a way to do this. You could use a pseudo-element afterto position a block on top of your background image. Something like this:
http://jsfiddle.net/Pevara/N2U6B/
是的，有一种方法可以做到这一点。您可以使用伪元素after在背景图像的顶部放置一个块。像这样的东西：http:
//jsfiddle.net/Pevara/N2U6B/
The css for the :afterlooks like this:
的 css:after看起来像这样：
#the-div:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
}
edit:
When you want to apply this to a non-empty element, and just get the overlay on the background, you can do so by applying a positive z-indexto the element, and a negative one to the :after. Something like this:
编辑：
当你想把它应用到一个非空元素，并且只是在背景上得到叠加层时，你可以通过z-index对元素应用正值，对:after. 像这样的东西：
#the-div {
...
z-index: 1;
}
#the-div:hover:after {
...
z-index: -1;
}
And the updated fiddle: http://jsfiddle.net/N2U6B/255/
和更新的小提琴：http: //jsfiddle.net/N2U6B/255/
回答by pgrono
/* 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>source: https://css-tricks.com/tinted-images-multiple-backgrounds/
来源：https: //css-tricks.com/tinted-images-multiple-backgrounds/
回答by RedEight
Ideally the background property would allow us to layer various backgrounds similar to the background image layering detailed at http://www.css3.info/preview/multiple-backgrounds/. Unfortunately, at least in Chrome (40.0.2214.115), adding an rgba background alongside a url() image background seems to break the property.
理想情况下，背景属性将允许我们将各种背景分层，类似于http://www.css3.info/preview/multiple-backgrounds/ 中详细介绍的背景图像分层。不幸的是，至少在 Chrome (40.0.2214.115) 中，在 url() 图像背景旁边添加 rgba 背景似乎破坏了该属性。
The solution I've found is to render the rgba layer as a 1px*1px Base64 encoded image and inline it.
我找到的解决方案是将 rgba 层渲染为 1px*1px Base64 编码图像并将其内联。
.the-div:hover {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgkAQAABwAGkn5GOoAAAAASUVORK5CYII=), url("the-image.png");
}
for base64 encoded 1*1 pixel images I used http://px64.net/
对于 base64 编码的 1*1 像素图像，我使用了http://px64.net/
Here is your jsfiddle with these changes made. http://jsfiddle.net/325Ft/49/(I also swapped the image to one that still exists on the internet)
这是您进行了这些更改的 jsfiddle。http://jsfiddle.net/325Ft/49/（我还把图片换成了互联网上仍然存在的图片）
回答by guero64
I've gotten the following to work:
我已经得到以下工作：
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;
}
The above will produce a nice opaque blue overlay.
以上将产生一个漂亮的不透明蓝色覆盖。
