图片式进度条实现原理

功能描述

图片式进度条。输入一个百分比数值，根据输入值显示高度占比。

视觉原理

从UI实现的角度，是两张图片（最好是svg）重叠，向底端对齐。底层是灰色图片，保持固定高度；上层是蓝色图片，宽度与底层一致，高度根据输入值修改。这样可以在视觉上体现高度占比的效果。

前端实现原理

从前端实现的角度，这个组件可以理解为一个底端对齐的进度条，进度条样式由图片决定。

进度条功能由一对父子div实现。底层灰色图片作为父div的背景，上层蓝色图片作为子div的背景。如下css设置子div相对父div底端对齐。

.father{
     position: relative;

    .child{
        position: absolution;
        bottom: 0;
    }   
}

还需要设置子div的 background-size:cover，这样能保证上层图片从底端开始显示高度，并且图片大小不变，不会压缩在高度中。

css部分实现后，子div的高度通过JS的DOM操作传入。

完整css代码

.fatherGraphic{
            position: relative;
            heig