利用css样式background-size做一个简单的进度条

10%的进度

10%

代码

<div class="progress-bar"
    style="200px; height:20px; background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAQCAIAAABY/YLgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAUSURBVBhXY2BYdIWJgYGBPMzAAABdwAGV/9CqNwAAAABJRU5ErkJggg=='); background-repeat-x: no-repeat; background-repeat-y: no-repeat;
    background-size: 10%;
    border: #00a2d4 solid 1px;">
    10%
</div>

50%的进度

50%

代码

<div class="progress-bar"
    style="200px; height:20px; background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAQCAIAAABY/YLgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAUSURBVBhXY2BYdIWJgYGBPMzAAABdwAGV/9CqNwAAAABJRU5ErkJggg=='); background-repeat-x: no-repeat; background-repeat-y: no-repeat;
    background-size: 50%;
    border: #00a2d4 solid 1px;">
    50%
</div>

100%的进度

100%

代码

<div class="progress-bar"
    style="200px; height:20px; background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAQCAIAAABY/YLgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAUSURBVBhXY2BYdIWJgYGBPMzAAABdwAGV/9CqNwAAAABJRU5ErkJggg=='); background-repeat-x: no-repeat; background-repeat-y: no-repeat; 
    background-size: 101%;
    border: #00a2d4 solid 1px;">
    100%
</div>

这里要注意下，size要设置为101%才能填满，有兴趣的可以研究下，想必跟盒子模型有关，有答案的希望不吝赐教。