使用CSS在悬停时叠加透明图像

Question

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

这里有一个答案，但它在IE7或IE8中不起作用。 谁会知道怎么做？

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

谢谢

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> ）等特定元素上。 如果要支持IE6， .image更改为<a>而不是<div> ，并将其display: block; 。

Answer 2

这仍然不适用于IE7 / 8 AFAIK，所以我担心这不会回答这个问题。

但是，当我忘记如何使用现代方法完成这项工作时，我已经在这个页面上结束了，所以我把答案放在这里供参考。

我只能通过将img放在容器/包装器div中来实现这一点，因为img元素不会接受psuedo-classes，如: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 */
}

请参阅此处的示例

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>

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