需要的效果如图，图片下方加个遮掩层：
html：
<div class="listContent"> <div><img src="images/sucai03.png"/><div class="mask"></div></div> <div><img src="images/sucai03.png"/><div class="mask"></div></div> <div><img src="images/sucai03.png"/><div class="mask"></div></div> <div><img src="images/sucai03.png"/><div class="mask"></div></div> <div><img src="images/sucai03.png"/><div class="mask"></div></div> <div><img src="images/sucai03.png"/><div class="mask"></div></div> </div>
css：
.listContent>div{ width:300px; height: 300px; float: left; margin-top: 20px; margin-left: 20px; position:relative; } .mask{ width:300px; height: 40px; background-color:#FFCCCC; position: absolute; margin-top: -40px; opacity: 0.8; }
原理，父级定位属性值为relative，遮掩层定位属性值为absolute。
PS：楼主邮箱 tccwpl@163.com
