如何在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頂部獲得背景圖片？

回答

相關問題