background图片叠加,叠加背景图像与RGBA背景颜色

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.

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.).

I tried multiple things:

And this 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);

}

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?

解决方案

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:

Red text

.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");

}

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.