如何在 CSS 中覆盖图像？

Question

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

当我将鼠标悬停在图像上时，我想将带有一些文本和图标的深色放在该图像上。

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

怎样才能达到这种效果？

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

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

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

Answer 3

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

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

    filter: brightness(0.2);

*不兼容IE

Answer 4

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

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

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

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

乘法、屏蔽、叠加、变暗、变亮、颜色减淡、颜色加深、强光、柔光、差异、排除、色调、饱和度、颜色和亮度。

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