如何在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

将此答案放在此处，因为它是Google的最高结果。

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

    filter: brightness(0.2);

*与IE不兼容

Answer 4

这有点晚了，但在搜索叠加方法时，这个帖子在Google中作为最佳结果出现。

您只需使用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);
}