现在的位置: 网页制作教程网站制作经验 >正文
CSS

在网页中图片右下角覆盖一个div层的方法

发表于2016/12/22 网站制作经验 0条评论 ⁄ 热度 1,278℃

在项目中需要给网页中每张图片的右下角覆盖一个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>
  • 暂无评论