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，就能够随意设置父元素样式了。
效果：