Html 如何在CSS中覆盖图像？

我正在努力实现这样的目标：

当我把鼠标悬停在一个图像上时，我想在这个图像上加上一些文字和图标

我被困在这里了。我找到了一些教程，但它们不适合这个案例。 另外，还有一个问题——每个图像都有不同的高度。宽度总是一样的

---

如何实现这种效果？

您可以通过以下简单的CSS/HTML实现：

.image-container {
    position: relative;
    width: 200px;
    height: 300px;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

HTML

这是一些内容。它可以很长，可以跨越几条线。

您可以为此使用伪元素，并将图像悬停：

.image{
位置：相对位置；
高度：300px；
宽度：300px；
背景：url(http://lorempixel.com/300/300);
}
.图片：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
过渡：所有0.8秒；
不透明度：0；
背景：url(http://lorempixel.com/300/200);
背景大小：100%100%；
}
。图片：悬停：在{
不透明度：0.8；
}

---

这样做有点晚了，但在谷歌搜索覆盖方法时，这个线程是最重要的结果

您只需使用

背景混合模式

.foo {
    background-image: url(images/image1.png), url(images/image2.png);
    background-color: violet;
    background-blend-mode: screen multiply;
}

这样做的目的是获取第二幅图像，并使用“倍增混合”模式将其与背景色混合，然后使用“屏幕混合”模式将第一幅图像与第二幅图像和背景色混合。有16种不同的混合模式可用于实现任何叠加

---

乘法、屏幕、叠加、变暗、变亮、颜色减淡、颜色燃烧、强光、柔和光、差异、排斥、色调、饱和度、颜色和亮度。

将此答案放在这里，因为这是谷歌的最佳结果

如果您想要快速简单的方法：

    filter: brightness(0.2);

*与IE不兼容

.bg img{
文本对齐：居中；
填充：130px 0px；
宽度：100%！重要；
背景尺寸：封面！重要；
背景重复：不重复！重要；
背景：线性梯度（0deg，rgba（0,0,0,0.86），rgba（0,0,0,0.86）），url（你的img路径）；
}

的可能重复，但问题是我不知道.image容器的高度。我玩过它，它似乎工作正常，谢谢dfsq！只有一件事——我怎么能将文本始终粘贴在相应图像的底部？谢谢你，我正在战斗，把图标放在悬停区域的中间——有没有有效的方法把它放在那里？ThxBy using display:无，您已经停止了使用任何类型的动画和过渡效果的功能，我认为这是使覆盖层看起来好看的一个重要美学因素。@LukeJonGibson哈哈，这就是为什么这个答案没有用，需要否决。这是一个好主意。然而，主要的问题是，它要求两个图像都是背景图像。如果主映像是HTML

，则它不起作用。此外，当时，

背景混合模式

没有得到很好的支持：Chrome和FF的最新版本在Safari中得到了部分支持（）这篇文章已经发表6年了，被接受的答案有100多张选票，其中一些是在过去的几个月里。你的答案没有错，但也许你可以进一步说明为什么你的答案对2020年阅读本文的人有用。这是css的一个新特性吗？过滤器已经存在多年了。我没有在任何答案中看到它，所以我想我可以帮助那些仍在浏览此页面的人找到更快的解决方案。希望它对那些遇到它的人有用。你的帖子刚刚出现在“迟交答案”队列中。因为这不是我的领域，我想在你的答案中多看一点，看看这与其他答案相比是如何的，这会很酷。也许可以提供一个JSFIDLE来与上面的答案进行比较。这正是我想要的！非常感谢。

    filter: brightness(0.2);