Html 如何在 CSS 中覆盖图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21086385/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make in CSS an overlay over an image?
提问by user984621
I am trying to achieve something like this:
我正在努力实现这样的目标：
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
当我将鼠标悬停在图像上时，我想将带有一些文本和图标的深色放在该图像上。
I am stuck here. I found some tutorials but they didn't work out for this case. Also, another issue -- every image has a different height. The width is always the same.
我被困在这里。我找到了一些教程，但它们不适用于这种情况。另外，另一个问题——每个图像都有不同的高度。宽度总是一样的。
How can this effect be achieved?
怎样才能达到这种效果？
回答by dfsq
You can achieve this with this simple CSS/HTML:
您可以使用这个简单的 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
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
Demo: http://jsfiddle.net/6Mt3Q/
演示：http: //jsfiddle.net/6Mt3Q/
UPD: Here is one nice final demo with some extra stylings.
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>回答by jbutler483
You could use a pseudo element for this, and have your image on a hover:
您可以为此使用伪元素，并将您的图像悬停在：
.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>回答by Emil Mladenov
A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.
这有点晚了，但是当搜索覆盖方法时，这个线程在谷歌中作为最高结果出现。
You could simply use a background-blend-mode
你可以简单地使用一个 background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.
它的作用是获取第二张图像，并使用乘法混合模式将其与背景色混合，然后使用屏幕混合模式将第一张图像与第二张图像和背景色混合。您可以使用 16 种不同的混合模式来实现任何叠加。
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
乘法、屏蔽、叠加、变暗、变亮、颜色减淡、颜色加深、强光、柔光、差异、排除、色调、饱和度、颜色和亮度。
回答by Andrew Samole
Putting this answer here as it is the top result in Google.
把这个答案放在这里，因为它是谷歌的最高结果。
If you want a quick and simple way:
如果你想要一个快速简单的方法：
filter: brightness(0.2);
*Not compatible with IE
*不兼容IE
