如何在 img 上获取背景图像？答案

【问题标题】：How do I get a background image on top of an img?如何在 img 上获取背景图像？
【发布时间】：2013-04-08 15:06:58
【问题描述】：

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

.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;
}

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

【问题讨论】：

你能做个小提琴吗？
小提琴：jsfiddle.net/heetertc/nTMun 感谢@Mooseman 的想法

标签： html css image

【解决方案1】：

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

【讨论】：

检查小提琴，由于某种原因这不起作用：jsfiddle.net/heetertc/nTMun
由于图像是.special-corner 的子图像，并且您为图标使用了背景图像，因此背景图像位于下方。我编辑了你的 HTML 和 CSS：jsfiddle.net/nTMun/3

【解决方案2】：

您需要添加除静态（初始值）以外的位置属性才能使 z-index 起作用。你可以给.special-corner position: relative 然后给它一个正的z-index让它覆盖图像。

【讨论】：

我在 .special-corner 中添加了“position: relative; z-index: 2”，但这不起作用，所以我还添加了“position: relative（也尝试了 absolute）；z-index: 1"到img，仍然没有工作。当我删除图像时，我可以看到图标，所以我不确定为什么这个方法不起作用。

【解决方案3】：

使用z-index 强制元素“深度”。喜欢较低的图像和较高的.special-corner

【讨论】：