图片式进度条实现原理

功能描述

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

视觉原理

从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;
            height: 1.5rem;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: bottom;
            
            .childGraphic{
                position: absolute;
                bottom: 0;
                max-height: 100%;
                width: 100%;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: bottom;
            }
}

一些Tip

• 底层图片需设置固定高度，上层图片最好设置max-height。
• 由于底层图片固定高度，考虑到不同设备的适配问题，应设置background-siza:contain。即高度固定宽度自适应，确保底层小人的脑袋不会被‘削去一块’。