HTML与CSS星星评分效果-优快云博客

HTML代码部分：

<!DOCTYPE html>
<html>
<head>
    <title>stars_show</title>
    <meta http-equiv="content-type" content="text/html" charset="utf-8"/>
</head>
<body>
<div class="shop_item_star">
    <div class="star4"></div>
    <div class="shop_star"></div>
</div>
</body>
</html>

CSS代码部分：

@charset "utf-8";
/****************************************** star ********************************************************/
.shop_item_star .shop_star, .shop_item_star .star1, .shop_item_star .star2, .shop_item_star .star3, .shop_item_star .star4, .shop_item_star .star5 {
    background: url("stars_icons.png") no-repeat scroll -72px -22px #fff;
    height: 20px;
    position: absolute;
    width: 100px;
    z-index: 10;
}
.shop_item_star .shop_star {
    background-position: -72px 0;
    position: static;
    z-index: 1;
}
.shop_item_star .star1 {
    width: 18px;
}
.shop_item_star .star2 {
    width: 36px;
}
.shop_item_star .star3 {
    width: 54px;
}
.shop_item_star .star4 {
    width: 72px;
}
.shop_item_star .star5 {
    width: 90px;
}

图片：