【问题标题】：Hover an image but keep the background one悬停图像但保留背景
【发布时间】：2013-08-21 00:59:24
【问题描述】：

当我悬停背景图片时，我希望显示另一张图片，但保留背景图片。基本上，我希望在悬停的图像上出现一个箭头，但这就是我得到的：（请参阅下面的位链接）。它应该是这样的：http://i44.tinypic.com/2vnm7au.jpg

http://bit.ly/18F2Cqd

有什么建议吗？

【问题讨论】：

在css3中，可以添加多张bg图片。
快速解决方案，将图像放大两倍。上半部分放置原始图像，下半部分放置最终结果。使 div 等于创建图像高度的一半，并更改背景位置悬停。
@RohanSood 但我希望这种悬停效果能够影响上传到特定画廊的所有图像，例如。
在这种情况下，您需要付出很多努力。您需要使用 div 封装每个图像，该 div 会在悬停时加载遮罩（.png 格式）。
为什么jsfiddle链接有点链接？

标签： css image background hover

【解决方案1】：

您的 CSS 中有错误。
首先，背景图片位于另一个网址，而不是您拥有的网址。你有background-image，你应该写background，简写属性。

纠正这些错误后，我看到背景图像显示的比原来的低了 2 个像素，所以我不得不稍微改变背景位置，使箭头出现在同一个位置。

background: url("http://oi44.tinypic.com/2vnm7au.jpg") 0 -2px no-repeat;

更正小提琴：http://jsfiddle.net/MrLister/vR7st/3/

【讨论】：

非常感谢。我已经尝试了很多方法，以至于我犯了这些错误。非常感谢您的帮助。

【解决方案2】：

我了解到您想在背景图片上叠加一张图片；并且叠加的图像将始终相同。

在这种情况下，CSS 将是：

.test {
    position: absolute;
    top: 8px;
    left: 20px;
    background: url("base.jpg");
    width: 250px;
    height: 200px;
}

.test:hover:after {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: url("overlay.png");
    background-repeat: no-repeat;
}

覆盖文件应该有一些透明区域，以便可以看到基础背景。

fiddle

【讨论】：