<li class="licence"> <span class="type_key type_img_key">
... . .
<li class="licence"> <span class="type_key type_img_key"> 证件照片: </span> <div class="type_img"> 营业执照 <input type="file" id="subImg" onchange="selectImage(this)"> <div class="img"><img src="" alt=""></div> </div> <label for="subImg" class="sub_img"> 上传图片 </label> </li>. .
.licence{ @include clear; width: 100%; padding-bottom: 10px; .type_img{ @include whl(198px,126px); font-size: 14px; color: #333333; text-align: center; padding:0; position: relative; input[type="file"]{ position: absolute; width:100%; top:0;left: 0;right: 0;bottom: 0; margin: auto; opacity: 0; z-index: 9; cursor: pointer; } .img{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 4; padding:5px; } &:after{ display: none; content: "重新上传图片"; position: absolute; background: rgba(0,0.6); z-index: 8; top:0;left: 0; color: #fff; cursor: pointer; font-size: 14px; width: 100%; height: 100%; line-height: 126px; text-align: center; } &.active{ color:#fff; } &.active:hover{ &:after{ display: block; } } } .sub_img{ background: #F4F4F4; border: 1px solid #D9D9D9; border-radius: 2px; @include whl(94px,34px); float: left; margin-left: 20px; text-align: center; font-size: 14px; color: #666666; margin-top: 90px; cursor: pointer; } } . . .subject_auth .type .licence { width: 100%; padding-bottom: 10px;}.subject_auth .type .licence:after { content: ""; clear: both; height: 0; line-height: 0; display: block;}.subject_auth .type .licence .type_img { width: 198px; height: 126px; line-height: 126px; font-size: 14px; color: #333333; text-align: center; padding: 0; position: relative;}.subject_auth .type .licence .type_img input[type="file"] { position: absolute; width: 100%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; opacity: 0; z-index: 9; cursor: pointer;}.subject_auth .type .licence .type_img .img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 4; padding: 5px;}.subject_auth .type .licence .type_img:after { display: none; content: "重新上传图片"; position: absolute; background: rgba(0,0.6); z-index: 8; top: 0; left: 0; color: #fff; cursor: pointer; font-size: 14px; width: 100%; height: 100%; line-height: 126px; text-align: center;}.subject_auth .type .licence .type_img.active { color: #fff;}.subject_auth .type .licence .type_img.active:hover:after { display: block;}.subject_auth .type .licence .sub_img { background: #F4F4F4; border: 1px solid #D9D9D9; border-radius: 2px; width: 94px; height: 34px; line-height: 34px; float: left; margin-left: 20px; text-align: center; font-size: 14px; color: #666666; margin-top: 90px; cursor: pointer;} . . .. ...
