如何在 CSS 中覆盖图像？答案

【问题标题】：How to make in CSS an overlay over an image?如何在 CSS 中覆盖图像？
【发布时间】：2014-01-31 21:49:31
【问题描述】：

我正在尝试实现这样的目标：

当我将鼠标悬停在图像上时，我想在该图像上加上一些文字和图标。

我被困在这里。我找到了一些教程，但它们不适用于这种情况。另外，另一个问题——每张图片都有不同的高度。宽度始终相同。

这个效果怎么实现？

【问题讨论】：

How to overlay images 的可能重复项

标签： html css image hover opacity

【解决方案1】：

您可以通过这个简单的 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

<div class="image-container">
    <img src="http://lorempixel.com/300/200" />
    <div class="after">This is some content</div>
</div>

演示：http://jsfiddle.net/6Mt3Q/

UPD：这是一个不错的最终演示，带有一些额外的样式。

.image-container {
    position: relative;
    display: inline-block;
}
.image-container img {display: block;}
.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);
}
.image-container .after .content {
    position: absolute;
    bottom: 0;
    font-family: Arial;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
}
.image-container .after .zoom {
    color: #DDD;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -19px;
    height: 50px;
    width: 45px;
    cursor: pointer;
}
.image-container .after .zoom:hover {
    color: #FFF;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="image-container">
    <img src="http://lorempixel.com/300/180" />
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom">
            <i class="fa fa-search"></i>
        </span>
    </div>
</div>

【讨论】：

但问题是我不知道.image-container的高度。
我玩过它，它似乎工作正常，谢谢dfsq！只有一件事 - 我怎么能将文本始终粘贴在相应图像的底部？谢谢
我正在努力将图标放在悬停区域的中间 - 有什么有效的方法可以把它放在那里吗？谢谢
通过使用 display:none，您已经停止使用任何类型的动画和过渡效果，我认为这是让叠加层看起来不错的重要美学。
@LukeJonGibson 哈哈，这就是为什么这个答案没有用，需要被否决。

【解决方案2】：

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

.image {
  position: relative;
  height: 300px;
  width: 300px;
  background: url(http://lorempixel.com/300/300);
}
.image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.8s;
  opacity: 0;
  background: url(http://lorempixel.com/300/200);
  background-size: 100% 100%;
}
.image:hover:before {
  opacity: 0.8;
}

&lt;div class="image"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

把这个答案放在这里，因为它是谷歌的最高结果。

如果你想要一个快速简单的方法：

    filter: brightness(0.2);

*不兼容IE

【讨论】：

帖子已有 6 年历史，接受的答案有 100 多票，其中一些是过去几个月的。您的答案没有任何问题，但也许您可以进一步扩展为什么您的答案可能对 2020 年阅读本文的人有用。这是 css 的新功能吗？
过滤器已经存在多年了。我没有在任何答案中看到它，所以我想我可以帮助仍在导航到此页面的人以获得更快的解决方案。
希望它对遇到它的人有用。您的帖子刚刚出现在“迟到的答案”队列中。由于这不是我的真正领域，我认为在您的答案中看到更多关于这与其他答案的比较会很酷。也许提供一个 jsfiddle 来与最佳答案进行比较。
这正是我想要的！谢谢。

【解决方案4】：

这有点晚了，但是当搜索覆盖方法时，这个线程在谷歌中作为最高结果出现。

您可以简单地使用background-blend-mode

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

它的作用是获取第二张图像，并使用乘法混合模式将其与背景颜色混合，然后使用屏幕混合模式将第一张图像与第二张图像和背景颜色混合。您可以使用 16 种不同的混合模式来实现任何叠加。

正片叠底、加网、叠加、变暗、变亮、颜色减淡、颜色加深、强光、柔光、差异、排除、色相、饱和度、颜色和亮度。

【讨论】：

这是个好主意。然而，主要问题是它要求两个图像都是背景图像。如果主图像是 HTML <img />，则它不起作用。此外，当时，background-blend-mode没有得到很好的支持：Chrome 和 FF 的最新版本在 Safari 中部分支持 (caniuse.com/#search=background-blend-mode)

【解决方案5】：

.bg-img{
  text-align: center;
  padding: 130px 0px;
  width: 100% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);
}

【讨论】：