我需要在产品图片上放置一个图标。我已经为此工作了很长一段时间。我错过了什么?
.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;
}
编辑:这是 fiddle ,感谢@Mooseman 的想法。 http://jsfiddle.net/heetertc/nTMun/
最佳答案
在图像上使用z-index: 1
,在.special-corner
上使用z-index: 2
。
关于html - 如何在 img 上获取背景图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15882614/