css input file 美化

html代码
<div class=”file-container”>
<input type=”file” name=”img”>
</div>
css 代码
.file-container {
position: relative;
width: 7rem;
height: 6rem;
background: url(‘../common/images/ui/组1.png’) center center no-repeat;
background-size: 100%;
}
.file-container input {
position: absolute;
display: block;
width: 100%;
height: 100%;
right: 0;
top: 0;
opacity: 0;
}
input 撑满父容器，透明度设置为0，就可以随意设置父元素样式了。效果：