css - 悬停图像但保留背景

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;
}

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

小提琴

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/