Question

我需要在产品图片上放置一个图标。我一直在研究这个问题。我错过了什么？

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

<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/

Answer 1

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

Answer 2

您需要为z-index添加静态（初始值）以外的位置属性才能工作。您可以给.special-corner位置：相对，然后给它一个正z-index，以覆盖图像。

Answer 3

使用z-index强制执行元素“深度”。比较低的图片和更高的.special-corner

如何在img上获得背景图像？

3 个答案: