使用CSS在悬停时覆盖透明图像

Question

我正在尝试使用CSS在悬停时覆盖透明图像。

这里有一个答案在这里，但在IE7或IE8中无效。有人知道如何做到这一点吗？

我试图保持超轻量级，所以不想使用js或类似的东西。

谢谢

- TheTub

---

这个问题是关于图片是否只包含一种颜色的透明部分。 - Martijn

你能够发布一下你正在使用的标记吗？或者可以分享一个 JS Fiddle 演示 来展示你尝试过的内容吗？ - David Thomas

您可以在此处查看效果 - http://www.nightlylabs.com/uploads/test.html。它在Firefox和Chrome中运行正常，但在IE中无法正常工作。 - TheTub

Answer 1

我查看了你提供的链接，并根据它得到了这个解决方案。

HTML：

<div class="image">
    <img src="xy.jpg" alt="" />
    <img class="hoverimage" src="xy_hover.jpg" alt="" />
</div>

CSS：

.image { position: relative; width: 184px; height: 219px; }
.hoverimage { position: absolute; top: 0; left: 0; display: none; }
.image:hover .hoverimage { display: block; }

应该适用于所有浏览器，包括IE8和IE7。它在IE6中不起作用，因为它只允许对某些元素（如链接(<a>)）使用:hover。如果要支持IE6，请将.image更改为<a>而不是<div>，并给它display:block;。

- kapa

Answer 2

据我所知，这仍然无法在IE7/8上运行，所以恐怕这不会回答问题。

然而，当我忘记如何使用现代方法使其工作时，我最终来到了这个页面，因此我将答案放在这里供参考。

我只能通过将放置在容器/包装器

中来实现这一点，因为元素不接受像:after这样的伪类。

<div class="container"><img src="http://placekitten.com/240/320" alt="icanhaz"></div>

然后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 */
}

请看示例这里

- Luke H

Answer 3

通常我们会重新创建一个应该具有透明覆盖的图像，使用 .png 格式。JPEG 是一种不支持透明度的平面图像格式。

接下来我们要做的是像这样：

<div style="Background-Image:Url(BackgroundImage.Jpg);Width:500px;Height:500px" >
   <div style="Background-Image:Url(OverlayImage.Png);Width:50%;Height:50%" >
     ...
   </div>
</div>

这是我能理解你问题的最接近方式

- Eon

---

这可能是一种不太可能的尝试，但请将<div class="image" ><img src="alig.jpg" /></div>更改为<div class="overlay:hover" ><img src="alig.jpg" /></div>。 - Eon

相同的问题。在除了 IE 以外的所有地方都可以工作。 - TheTub