我想在图像上添加一个图标。我正在尝试关注,但它似乎不起作用:
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;
}
最佳答案
无需修改标记。您的内容图像(绘画)保留在标记中,装饰图像(笑脸)保留在 CSS 中。
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;
}
关于html - 在图像上添加图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15186889/