Html 链接内的图像，悬停时有颜色覆盖

我需要做一个链接内的图像，它应该有一个颜色覆盖在悬停与文本内，它的死中心。但我不知道怎么做。我知道如何在图像上做一个简单的彩色叠加，但是如何在图像中使用img呢

到目前为止，这是我的代码，正如你所看到的，这不是我想要的。有人能帮我解决这个问题吗

.img叠加img{
位置：相对位置；
}
.覆盖{
显示：无；
位置：绝对位置；
颜色：#fff；
排名：0；
底部：0；
右：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（41,42,44,0.5）；
}
.img覆盖{
位置：相对位置；
}
.img覆盖：悬停。覆盖{
显示：块；
}

标题

我将使容器

内联块

适合图像大小，将图像设置为

垂直对齐：顶部

以便底部的空白消失，然后使用

显示：flex；对齐项目：居中；证明内容：中心以使其内容居中


.img叠加img{
位置：相对位置；
垂直对齐：顶部；
}
.覆盖{
显示：无；
位置：绝对位置；
颜色：#fff；
排名：0；
底部：0；
右：0；
左：0；
背景色：rgba（41,42,44,0.5）；
证明内容：中心；
对齐项目：居中；
}
.img覆盖{
位置：相对位置；
显示：内联块；
}
.img覆盖：悬停。覆盖{
显示器：flex；
}

标题
我将使容器
内联块
适合图像大小，将图像设置为
垂直对齐：顶部
以便底部的空白消失，然后使用
显示：flex；对齐项目：居中；证明内容：中心以使其内容居中


.img叠加img{
位置：相对位置；
垂直对齐：顶部；
}
.覆盖{
显示：无；
位置：绝对位置；
颜色：#fff；
排名：0；
底部：0；
右：0；
左：0；
背景色：rgba（41,42,44,0.5）；
证明内容：中心；
对齐项目：居中；
}
.img覆盖{
位置：相对位置；
显示：内联块；
}
.img覆盖：悬停。覆盖{
显示器：flex；
}

标题
为什么不在我们的a上使用背景图像？“我的图像需要在a中”-因此，首先将外部
div
替换为
a
。。。在所有可思考的情况和组合中，通过CSS将内容集中在一起是一个已经被广泛讨论过的话题，你应该能够自己通过一点研究来解决这一部分。为什么不在我们的a上使用背景图像呢？“我的图像需要在a中”-所以，首先用
a
替换外部
div
。。。在所有可思考的情况和组合中通过CSS将内容集中是一个已经被广泛讨论过的话题，你应该能够通过一点研究自己解决这一部分。哦！这是有道理的！最后谢谢你，迈克尔。我刚刚用a替换了第一个div，就这样。再次感谢@哦，糟糕，我错过了你想让它成为链接的那部分。是的，只要换一下标签就行了。更新了我的答案以反映这一点。不客气：）哦！这是有道理的！最后谢谢你，迈克尔。我刚刚用a替换了第一个div，就这样。再次感谢@哦，糟糕，我错过了你想让它成为链接的那部分。是的，只要换一下标签就行了。更新了我的答案以反映这一点。不客气：）