PeterVR的解决方案的缺点是，额外的颜色显示在整个HTML块的顶部 – 这意味着它也显示在div内容的顶部，而不仅仅是背景图像的顶部。这很好，如果你的div是空的，但如果它不使用线性渐变可能是一个更好的解决方案：
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");
}
见fiddle.太糟糕了，梯度规格目前是一团糟。看到compatibility table，上面的代码应该在任何具有显着市场份额的浏览器中工作 – 除了MSIE 9.0及更早版本。
