使用 CSS 在悬停时覆盖透明图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5647619/
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
Overlay transparent image on hover using CSS
提问by TheTub
I'm trying to overlay a transparent image on hover using CSS.
我正在尝试使用 CSS 在悬停时覆盖透明图像。
There is an answer herebut it doesn't work in IE7 or IE8. Would anyone know how to do this?
这里有一个答案，但它在 IE7 或 IE8 中不起作用。有谁知道如何做到这一点？
I'm trying to keep super-light so don't really want to use js or anything similar.
我试图保持超轻，所以真的不想使用 js 或任何类似的东西。
Thanks
谢谢
回答by kapa
I checked your link and came up with this solutionbased on that.
HTML:
HTML：
<div class="image">
<img src="xy.jpg" alt="" />
<img class="hoverimage" src="xy_hover.jpg" alt="" />
</div>
CSS:
CSS：
.image { position: relative; width: 184px; height: 219px; }
.hoverimage { position: absolute; top: 0; left: 0; display: none; }
.image:hover .hoverimage { display: block; }
Should work in all browsers including IE8 and IE7. It won't work in IE6 because it only allows :hover on certain elements like links (<a>). If you want to support IE6, change .imageto be an <a>instead of a <div>and give it display: block;.
应该适用于所有浏览器，包括 IE8 和 IE7。它在 IE6 中不起作用，因为它只允许 :hover 在某些元素上，例如链接 ( <a>)。如果你想支持IE6，改成.imagean<a>而不是a<div>并给它display: block;。
回答by Luke H
This still doesn't work on IE7/8 AFAIK, so I'm afraid this won't answer the question.
这仍然不适用于 IE7/8 AFAIK，所以恐怕这不会回答问题。
However, I have ended up on this page when I forget how to make this work using modern methods, so I'm placing the answer here for reference.
但是，当我忘记如何使用现代方法进行这项工作时，我最终出现在此页面上，因此我将答案放在这里以供参考。
I've only been able to do this by placing the imgwithin a container/wrapper div, as imgelements won't accept psuedo-classes like :after.
我只能通过将 放在img容器/包装器 div 中来做到这一点，因为img元素不接受像:after.
<div class="container"><img src="http://placekitten.com/240/320" alt="icanhaz"></div>
Then the CSS is styled to provide a pseudo element on hover.
然后设置 CSS 样式以在悬停时提供伪元素。
.container {
position: relative;
}
.container:hover:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5); /* Here you may also use images, gradients, etc */
}
See the example here
请参阅此处的示例
回答by Eon
Usually we recreate the image that is supposed to have a transparent overlay in the .png format. .Jpeg is a flat image format which doesn't support transparency.
通常我们会以 .png 格式重新创建应该具有透明叠加层的图像。.Jpeg 是一种不支持透明度的平面图像格式。
the next step we take is to have something like this :
我们采取的下一步是有这样的事情：
<div style="Background-Image:Url(BackgroundImage.Jpg);Width:500px;Height:500px" >
<div style="Background-Image:Url(OverlayImage.Png);Width:50%;Height:50%" >
...
</div>
</div>
This is the closest to how I could understand your question
这是最接近我理解你问题的方式
