首页 > Web开发 > 详细

css之图片下方定位遮掩层

时间:2019-03-24 15:58:10      阅读:61      评论:0      收藏:0      [点我收藏+]

标签:遮掩   pre   http   span   mar   info   class   top   inf   

  需要的效果如图,图片下方加个遮掩层:

  技术分享图片

  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。

 

css之图片下方定位遮掩层

标签:遮掩   pre   http   span   mar   info   class   top   inf   

原文:https://www.cnblogs.com/sunshine-wy/p/10588524.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号