多图上传样式

多图上传样式

/***多图上传***/
.upimg{ overflow:hidden; vertical-align:middle; padding-left:0px;}
.upimg li{ float:left; margin-right:10px;}
.upimg li a{ display:block; width:100px; height:100px; text-align:center; line-height:96px; color:#999; border:1px dotted #c9c9c9; font-size:30px; position:relative; overflow:hidden;}
.upimg li a .delpic{ position:absolute; right:0px; top:0px; width:25px; font-size:12px; height:25px; background:red; color:#fff; text-align:center; line-height:25px;}
.upimg li a .tit { position:absolute; bottom:0px; left:0px; line-height:30px; font-size:12px; width:100%; color:#fff; text-align:center; background:rgba(0,0,0,0.8); padding:0px 5px; overflow:hidden;}
.upimg li a img{ display:block; width:100%; height:100%;}

<ul class="upimg">
            <li> <a href="javascript:void(0);"><img src="/upload/image/20170325/2017032552382.jpg" alt="" /><span class="delpic">x</span><span class="tit">图片名</span></a> </li>
            <li> <a href="javascript:void(0);"><img src="/upload/image/20170325/2017032552382.jpg" alt="" /><span class="delpic">x</span><span class="tit">图片名</span></a> </li>
            <li> <a href="javascript:void(0);"><img src="/upload/image/20170325/2017032552382.jpg" alt="" /><span class="delpic">x</span><span class="tit">图片名</span></a> </li>
            <li><a href="javascript:void(0);">+</a></li>
          </ul>