图像与rgba背景
我有一个background-image的div 。 当用户悬停div时，我想用rgba颜色（ rgba(0,0,0,0.1) ）覆盖背景图像。
我想知道是否有一个单独的解决方案（即没有多个div，一个用于图像，一个用于颜色等）。
我尝试了很多东西：
<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'); } .the-div:hover { background: url('the-new-image'); } 。 但是，我想要一个纯CSS的解决方案（整洁;较少的HTTP请求;较少的硬盘）。 有没有？
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>
看小提琴。 太糟糕了，渐变规范目前是一团糟。 查看兼容性表格，上面的代码应该在具有显着市场份额的任何浏览器中工作 - 除MSIE 9.0和更高版本外。
编辑 （2017年3月）：到目前为止，网络的状态已经不那么混乱了。 因此， linear-gradient （由Firefox和Internet Explorer支持）和-webkit-linear-gradient （由Chrome，Opera和Safari支持）行就足够了，不再需要额外的前缀版本。
是的，有一种方法可以做到这一点。 你可以使用伪元素after在您的背景图像的顶部位置的模块。 像这样的东西：http://jsfiddle.net/Pevara/N2U6B/
css for :after看起来像这样：
#the-div:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,.5);
}
编辑：
当你想把它应用到一个非空的元素上，并且只需要在背景上获得叠加层时，你可以通过对元素应用一个正z-index来实现，而对于:after应用一个负z-index 。 像这样的东西：
#the-div {
...
z-index: 1;
}
#the-div:hover:after {
...
z-index: -1;
}
并更新小提琴：http://jsfiddle.net/N2U6B/255/
/* 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>