在项目中需要给网页中每张图片的右下角覆盖一个div层，一直钟情于CSS的灵活功能，决定用css实现这一效果。
考虑到网页中图片大小不一样，又要求统一覆盖在右下角，所以用absolute定位，bottom和right控制距离。
下方是详细案例代码，有需要的同学可做参考。
<style>
.img {float:left;position:relative}
img{ display:block}
.mask {position:absolute;bottom:0;height:20px;width:60px;background-color:#006666;right:0;overflow:hidden}
</style>
<div class="img">
<img src="images/demo1.jpg" width="180" height="121" />
<div class="mask"></div>
</div>
<div class="img">
<img src="images/demo2.jpg" width="104" height="145" />
<div class="mask"></div>
</div>
声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/419.html
