css之图片下方定位遮掩层

          <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>

.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;
}