css之图片下方定位遮掩层

　　需要的效果如图，图片下方加个遮掩层：

　　

　　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。