【HTML+CSS】教你切图篇5-星星评分纯CSS实现

俗话说得好，前端切图玩的就是心机，有时候多动脑子想一想，就能避免写很多的js脚本，何乐而不为，废话少说，这次实现的的东西长下面这样：

原材料也很简单，就是两张图片，看看：

实现原理也是非常简单滴，把灰色星星作为背景，然后在上面叠加黄色星星，通过控制黄色星星的宽度，实现评分变化，是不是很简单？先来看看HTML标签：

<div class="star-eval">
    <span class="stars-bg">
        
        <i class="star-active" style="width: 20%">i>
    span>
    <span class="right-txt"><b>4.2b>分span>
div>

CSS样式：

.stars-bg{
    position: relative;
    display: inline-block;
    height: 19px;
    width: 157px;
    background: url(../images/evaluate.jpg) 0 0;
}
.star-active{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 100%;
    background: url(../images/evaluate.jpg) 0 -24px;
}

这样我们就不用一个个星星去拼接啦，而且宽度能精确到浮点数，不过重点是两张图片上下一定要对齐哦。

Author：事始
Sign：只要你还在尝试，就不算失败。