顶部的背景图片（使用 CSS）答案

【问题标题】：Background image on top (Using CSS)顶部的背景图片（使用 CSS）
【发布时间】：2012-10-24 09:43:00
【问题描述】：

当您将鼠标悬停在我的产品图片上时，我想将这张图片显示在它们之上。

这是我正在使用的：

.centerBoxContentsFeatured img:hover {
    background-image:url('http://i47.tinypic.com/vz2oj.gif');
    }

它确实有效，但它显示在产品图片的后面而不是顶部。我尝试了绝对定位和 z-index，但似乎没有任何效果。

http://www.pazzle.co.uk - 尝试应用到主页上的图像。

编辑：

#featuredProducts.centerBoxWrapper {
   position: relative;
   }
#featuredProducts.centerBoxWrapper:hover:before {
    content: '';
    width: 187px;
    height: 179px;;
    position: absolute;
    top: 0;
    left: 0;
    background-image:url('http://i47.tinypic.com/vz2oj.gif');
}

【问题讨论】：

标签： css background

【解决方案1】：

a {
    display: block;   
    position: relative;
    width: 100px;
    height: 100px;
}
a:hover:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image:url('http://i47.tinypic.com/vz2oj.gif');
}

Demo

使用伪元素。

【讨论】：

这个答案比我的好，伪元素对这种事情真的很有用！
谢谢您，先生，我几乎可以正常工作了，请在 OP 中查看我的编辑。图片只出现在一个位置，不管图片是否被悬停？？
我查看了您的网站，看起来您将样式应用到了错误的元素。我认为您应该将它们应用于.centerBoxContentsFeatured
@KaeruCT 是正确的，div 应该是每个单独图像的包装，所以在这种情况下 .centerBoxContentsFeatured。
优秀，工作出色。还有一件事可能是不可能的，但是叠加图像现在阻止了它后面的图像链接，有没有办法将链接也应用到价格图像？

【解决方案2】：

它正在做它应该做的事情。它是一个背景，所以它会出现在容器内容的后面。

您需要做的是在您悬停的图像上覆盖一个 div。我认为这可以通过纯 CSS 解决方案实现，但使用一些 JavaScript 可能会更容易。

看到这个问题：on hover overlay image in CSS

【讨论】：