css用两张图片叠加实现进度条

HTML代码如下： 

<div class="downImg">
	<div class="upImg" style="width:50%;">
	</div>
</div>

CSS代码如下：

.downImg {
	margin-top: 5px;
	width: 100%;
	height: 16px;
	position: relative;
	background: url(../img/2_reward/welfare_pic_.png) 0 0 no-repeat;
	background-size: 100% 100%;
	border-radius: 10px;
}

.upImg {
	position: absolute;
	height: 90%;
	max-width: 100%;
	background: url(../img/2_reward/welfaretiao_pic_.png) 0 0 no-repeat;
	background-size: cover;
	border-radius: 10px;
}

其实原理就是，通过控制上图的宽度来控制进度条的进度