如何在CSS中制作图像上的覆盖层？

Question

如何在CSS中制作图像上的覆盖层？

htmlcssimagehoveropacity

88

我想实现类似这样的效果： this effect

当我悬停在图像上时，我想在该图像上放置这种带有文本和图标的黑色颜色。

我卡在这里了。我找到了一些教程，但它们对这种情况没有用。另外一个问题是 - 每个图像的高度都不同。宽度始终相同。

如何实现这种效果？

- user984621

可能是重复的问题：如何叠加图像。 - Ranveer

5个回答

43

您可以使用伪元素来实现这一点，并在鼠标悬停时显示图像：

.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;
}

<div class="image"></div>

- jbutler483

41

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

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

    filter: brightness(0.2);

*不兼容IE浏览器

- Andrew Samole

3

这篇帖子已经发布了6年，被采纳的回答得到了100多个赞同票，其中一些是在最近几个月内投票的。你的回答没有问题，但是或许你可以进一步解释为什么你的回答对于2020年阅读这篇文章的人会有用。这是否是CSS的一个新特性？ - Cohan

1

过滤器已经存在多年了。我没有在任何答案中看到它，所以我想我可以帮助那些仍在浏览此页面寻找更快解决方案的人们。 - Andrew Samole

希望这对那些遇到此类问题的人有所帮助。你的帖子刚好出现在“晚回答”队列中。由于这不是我的专业领域，我认为在你的回答中加入更多关于如何与其他答案进行比较的内容会很酷。也许可以提供一个jsfiddle来与最佳答案进行比较。 - Cohan

这正是我一直在寻找的！谢谢。 - salsaverde

这是一个很好的额外评论/见解。 - Sri Nithya Sharabheshwarananda

这正是我所需要的，谢谢！ - Ascent

20

虽然有些晚，但是当我们在搜索叠加方法的时候，在谷歌中这个帖子却排名靠前。

你可以简单地使用background-blend-mode。

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

这个操作会采用“multiply”混合模式将第二张图片与背景颜色混合，然后采用“screen”混合模式将第一张图片与第二张图片以及背景色混合。你可以使用16种不同的混合模式来实现任何叠加效果。

这16种混合模式分别为：multiply、 screen、 overlay、 darken、 lighten、 color-dodge、 color-burn、 hard-light、 soft-light、 difference、 exclusion、 hue、 saturation、 color和 luminosity。

- Emil Mladenov

4

这是一个很好的想法。然而，主要问题在于它需要两个图像都成为背景图像。如果主要图像是HTML的<img />标签，它将无法工作。此外，目前background-blend-mode的支持还不是很好：只有最新版本的Chrome和火狐浏览器以及Safari部分支持（http://caniuse.com/#search=background-blend-mode）。 - bassplayer7

1

.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);
}

- Akash Pise

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dfsq · Accepted Answer

你可以使用这个简单的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/

更新：这里有一个带有一些额外样式的不错的最终演示。

.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>