html - 如何在 img 上获取背景图像？

Question

我需要在产品图片上放置一个图标。我已经为此工作了很长一段时间。我错过了什么？

.special-corner是一个以icon为背景图片的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;
}

编辑:这是 fiddle ，感谢@Mooseman 的想法。 http://jsfiddle.net/heetertc/nTMun/

Answer 1

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