html - 在图像上添加图像

Question

我想在图像上添加一个图标。我正在尝试关注，但它似乎不起作用:

HTML:

<ul>
    <li>
        <div class="icon">
            <img src="image.jpg" />
        </div>
    </li>
</ul>

CSS:

ul{
    margin: 0;
    list-style: none;
    position: relative;    
}

.icon{
    background : url("icon_quick.gif") no-repeat;
    border: 1px solid red;
    z-index: 2;
    overflow: hidden;
}

演示: http://jsfiddle.net/tqw4V/

Answer 1

无需修改标记。您的内容图像(绘画)保留在标记中，装饰图像(笑脸)保留在 CSS 中。

http://jsfiddle.net/tqw4V/6/

ul{
    margin: 0;
    list-style: none;
    /*position: relative;  */  
}

.icon{
    /*z-index: 2;
    overflow: hidden;*/
    position: relative;
}

.icon:before {
    background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
    height: 100px;
    width: 100px;
    content: '';
    position: absolute;
}