如何使用css在图像上添加覆盖颜色

如果我有这样的图像：

<img src="inshot1.jpg" width="100px" height="100px">​​​​​​​

​​​​​​​

---

在悬停时，我想用颜色覆盖那个块。例如，当你将鼠标悬停在它上面时，你会得到一块高度和宽度相同的红色。因此，覆盖基本上是？

可以通过多种方式完成，但您只需将其包装在带有

背景色的
中，然后在
上的图像上设置
可见性：隐藏
：悬停


div{
背景：红色；
显示：内联块；
}
img{
显示：块；
}
div:悬停img{
可见性：隐藏；
}
这里有两种方法可以做到这一点——都包括将图像包装到包含元素中

使用容器的背景

可以将包含元素的背景设置为红色，然后在悬停时降低图像的不透明度：

HTML如下所示：

<!-- Uses background color to fade color from behind. -->
<div id="background">
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" />
</div>

div { position: relative; float: left; }
img { display: block; }

#background { background: red; }
#background:hover img { opacity: 0.5; }

div { position: relative; float: left; }
img { display: block; }

#overlay span {
    background: red;
    bottom: 0;
    display: block;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

#overlay:hover span { opacity: 0.5; }

使用同级元素

您可以嵌套一个空跨度，并将其用作绝对定位的同级，该同级可以用作覆盖。查看此内容-以下是HTML：

<!-- Uses empty span to overlay color. -->
<div id="overlay">
    <img src="http://lorempixel.com/100/100/food" height="100" width="100" />
    <span></span>
<div>​

您可以在此处试用每个解决方案的演示：


可能有问题

需要注意的是，为了使包含元素与图像大小匹配，您需要执行以下四项操作之一：

浮动包含的元素
绝对定位包含元素
将包含元素设置为显示：内联块
显式设置包含元素的高度和宽度以匹配图像的尺寸
在我的JSFIDLE示例中，我将div设置为float:left