如何在img顶部获得背景图片？

我需要在产品图像的顶部放置一个图标。我一直在为此工作了一段时间。我错过了什么？如何在img顶部获得背景图片？

.special-corner是一个div图标作为背景图片，需要在img顶部显示。

<div class="vertical-vehicle-spotlight-item"> 
    <div class="vertical-item-photo"> 
    <a href="#"> 
     <div class="special-corner"> 
     <img width="260" height="146" src="kjhasd.png"> 

.vertical-vehicle-spotlight-item { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 1px solid #DDDDDD; 
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); 
    cursor: pointer !important; 
    height: 253px; 
    margin-left: 3px; 
    margin-top: 17px; 
    overflow: hidden; 
    padding: 5px; 
    width: 260px; 
} 

.vertical-item-photo { 
    height: 146px; 
    overflow: hidden; 
    vertical-align: middle; 
    width: 260px; 
} 

.special-corner { 
    background-image: url("/img/special-corner.png"); 
    background-position: 100% -1px; 
    background-repeat: no-repeat; 
    height: 100px; 
} 

.vertical-item-photo img { 
    height: 146px; 
    vertical-align: middle; 
    width: 260px; 
}

编辑：这是小提琴，感谢@Mooseman的创意。 http://jsfiddle.net/heetertc/nTMun/

来源

2013-04-08 Travis Heeter

你能做小提琴吗？ – Mooseman 2013-04-08 15:08:23

小提琴：http://jsfiddle.net/heetertc/nTMun/感谢您的想法@Mooseman – 2013-04-09 15:42:12

在图像上使用z-index: 1，在.special-corner上使用z-index: 2。

来源

2013-04-08 15:09:07 Mooseman

检查出小提琴，这是不工作的原因：http://jsfiddle.net/heetertc/nTMun/ – 2013-04-09 15:46:16

由于图像是'.special-corner'的孩子，你使用背景图像作为你的图标，背景图像在下面。我编辑了你的HTML和CSS：http://jsfiddle.net/nTMun/3/ – Mooseman 2013-04-09 19:21:21

使用z-index来强制元素“深度”。 .special-corner

来源

2013-04-08 15:10:00

您需要添加一个位置属性，而不是静态（初始值），以使z-index起作用。你可以给.special-corner position：relative，然后给它一个正的z-index来覆盖图像。

来源

2013-04-08 15:11:55 Adrift

我向.special-corner添加了“position：relative; z-index：2”，这没有奏效，所以我还添加了“position ：相对（也试过绝对）; z-index：1“到img，仍然没有工作。当我删除图像时，我可以看到图标，所以我不确定为什么这种方法不起作用。 – 2013-04-08 16:26:53

如何在img顶部获得背景图片？

回答

相关问题