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支持)行就足够了,不再需要其他带前缀的版本。