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

Answer 2

您可以更好地更改HTML，因为您在背景之上添加了一个内心孩子，这会将其推迟。

<强> HTML

<ul>
    <li>
        <div class="icon"></div>
            <img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" />
        </li>
</ul>

<强> CSS

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

.icon{
    width:100px; height:100px;
    background : url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
    z-index: 2;
    overflow: hidden;
    position:absolute;
}

JSFiddle

Answer 3

只需更换图像即可。替换他们的立场。笑脸应该转到html，另一个转到css。然后根据高度和宽度，您可以设置容器的大小。希望我帮助过。

Answer 4

以下是一种方法：http://jsfiddle.net/tqw4V/1/

不幸的是，它需要修改你的标记，但它有效。我们的想法是将叠加图像作为一个单独的元素，您可以完全定位在主元素上。如果主元素本身没有绝对定位，那么效果会更好。

HTML：

<ul>
    <li>
        <div class="icon">
            <img src="http://farm9.staticflickr.com/8382/8521029804_2c86ab5a18_m.jpg" />
            <div class="overlay"></div>
        </div>
        </li>
</ul>

CSS：

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

.icon{
    border: 1px solid red;
    z-index: 2;
    overflow: hidden;
}

.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: url("http://www.joors.com/se_images/icon_quick.gif") no-repeat;
    z-index: 4;
}
}

在图像上添加图像

4 个答案: