用最少的html标签实现图片上传进度展示

html结构：

    <div class="parent">
        <img class="image" src="http://h.hiphotos.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=94d19969d40735fa85fd46ebff3864d6/8644ebf81a4c510fe630d9686059252dd52aa5cf.jpg"/>
        <div class="progress">75%</div>
    </div>

css部分：

.parent {
/* 设置相对定位配合进度展示块的绝对定位 */
position: relative;
/* 设置浮动，让宽度收缩，包裹图片，不然太宽，会出现进度展示块的宽度大于图片的宽度 */
float: left;
}

.image {
/* 设置个最大宽度，防止宽度太大，超出父元素 */
max-width: 100%;
/* 设置浮动，防止其他空白文本也占用行内空间，出现多余的窄横条 */
float: left;
}

.progress {

/* 用绝对定位让进度展示块撑满父元素，并且和图片重叠 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

/* 默认设置一个铺满的半透明遮挡层挡住图片，以区分上传完成和正在上传的状态 */
background-color: rgba(0, 0, 0, 0.2);

/* 设置进度半透明层 */
background-size: 100% 75%; /* 75%和进度一致 */
background-image: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.3) 100%);
background-repeat: no-repeat;
background-position: 0 100%;

/* 用弹性盒子伸缩模型设置进度信息水平垂直方向都绝对居中 */
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
flex-wrap: nowrap;

/* 设置进度展示颜色为白色，防止不容易看到的问题 */
color: #FFF;
}

效果图：

本来还想利用css的attr函数，让进度信息只出现在一个地方，但是目前attr函数不能能用在content之外的属性里面，只好到此为止。