图片上黑色透明遮罩的实现

<! DOCTYPE html >
< html  lang ="en" >
< head >
     < meta  charset ="UTF-8" >
     < title >Document </ title >
     < style  type ="text/css" >
        *{ margin:  0;  padding:  0}
        .box{  width:  400px;  height:  300px;  background:  #000;  }
        .box img{ width:  400px;  height:  300px; border: none; -webkit-mask: -webkit-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,1),rgba(0,0,0,0.1));}
     </ style >
</ head >
< body >
     < div  class ="box" >
         < img  src ="http://p3.so.qhimg.com/sdr/960_768_/t01fb9758151f5e91cd.jpg" >
     </ div >
</ body >
</ html >