fiddle

Question

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

http://bit.ly/18F2Cqd

有什么建议吗？

Answer 1

我知道您想要在背景上叠加图像;并且叠加的图像将始终相同。

在这种情况下，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

Answer 2

你的CSS有错误。
首先，背景图像位于另一个网址上。你有background-image，你应该写一个简写属性background。

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

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

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

悬停图像但保留背景图像

2 个答案:

fiddle