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

【问题标题】：Overlay transparent image on hover using CSS使用 CSS 在悬停时覆盖透明图像
【发布时间】：2011-08-04 14:14:25
【问题描述】：

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

有一个答案here，但它在 IE7 或 IE8 中不起作用。有人知道怎么做吗？

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

谢谢

【问题讨论】：

只包含一种颜色的透明图像？
您能发布您正在使用的标记吗？或许可以分享JS Fiddle demo 向我们展示您的尝试？
你可以在这里看到效果 - nightlylabs.com/uploads/test.html 。它适用于 FF、Chrome 但不适用于 IE。

标签： css layout cross-browser

【解决方案1】：

我检查了您的链接，并在此基础上提出了this solution。

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 中不起作用，因为它只允许 :hover 在某些元素上，如链接 (<a>)。如果您想支持 IE6，请将 .image 更改为 <a> 而不是 <div> 并给它display: block;。

【讨论】：

【解决方案2】：

这仍然不适用于 IE7/8 AFAIK，所以恐怕这无法回答问题。

但是，当我忘记如何使用现代方法完成这项工作时，我最终进入了这个页面，所以我将答案放在这里以供参考。

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

查看示例here

【讨论】：

【解决方案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>

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

【讨论】：

这里远射，但尝试将
更改为
同样的问题。适用于除 IE 之外的所有应用程序。