我目前正致力于实现一个星级评级小部件。这需要使用 Sprite 文件，如下所示
我的 html 结构如下
HTML
<span id="star-ratings" class="containers">
<span id="ratings"></span>
</span>
我有以下 CSS，这是我不确定显示星星的地方
#star-ratings, #ratings{
background:url(../images/star-sprite.png) 0 15.8px repeat-x;
display: block;
width: 78px;
height: 14px;
}
为了进一步解释我的思考过程，我通过我的 javascript 传递了一个范围为 0-5 的评级值，然后计算最终宽度大小并将其应用于内部跨度。
目前我正在尝试显示初始开始，即空星。但是我在我的页面上看到了所有的星星。
最佳答案
说明
让我们使用 image您在示例中提供。图片有 80px 宽度(实际上是 79px 但我四舍五入)，14px 高度和 5 状态:0%、25%、50%、75% 和 100%。
要将图像用作 Sprite ，我们将创建一个名为 .star 的基类并指定图像的高度 (14px) 和单个图像的宽度状态，即 16px(80px/5 个状态)。
默认状态将是 Sprite 中的第一个 (0%)。之后，我们为每个附加状态创建一个额外的 CSS:25%、50%、75% 和 100%.
根据状态宽度，每个类的 background-position 属性都有不同的值。
例子
这是一个使用用户提供的图像作为 Sprite 的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.rating {
margin: 25px;
}
.rating label {
font-weight: bold;
display: block;
}
.star {
display: inline-block;
width: 16px;
height: 14px;
background-image: url('http://i.stack.imgur.com/ZSMMj.png');
background-repeat: none;
}
.star-25 {
background-position: -16px 0;
}
.star-50 {
background-position: -32px 0;
}
.star-75 {
background-position: -48px 0;
}
.star-100 {
background-position: -64px 0;
}
</style>
</head>
<body>
<div class="rating">
<label>1/5 (20%)</label>
<span class="star star-100"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>
<div class="rating">
<label>4/5 (80%)</label>
<span class="star star-100"></span>
<span class="star star-100"></span>
<span class="star star-100"></span>
<span class="star star-100"></span>
<span class="star"></span>
</div>
<div class="rating">
<label>8/10 (80%)</label>
<span class="star star-100"></span>
<span class="star star-100"></span>
<span class="star star-100"></span>
<span class="star star-100"></span>
<span class="star star-100"></span>
<span class="star star-100"></span>
<span class="star star-100"></span>
<span class="star star-100"></span>
<span class="star"></span>
<span class="star"></span>
</div>
</body>
</html>附加示例
这是另一个仅使用 CSS(无图像)的示例，用于进一步研究。基于Accessible star rating widget with pure CSS ，用户提供connexo在评论中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
body {
margin: 25px;
}
.center {
padding: 10px 0;
}
input[type=number] {
font-size: 22px;
padding: 5px;
width: 50px;
}
.star-rating {
display: inline-block;
}
.star {
font-size: 30px;
}
.star:before {
content: '★';
color: #ddd;
text-shadow: 2px 2px #bbb;
}
.star-rating[data-value="1"] .star:nth-child(-n + 1):before,
.star-rating[data-value="2"] .star:nth-child(-n + 2):before,
.star-rating[data-value="3"] .star:nth-child(-n + 3):before,
.star-rating[data-value="4"] .star:nth-child(-n + 4):before,
.star-rating[data-value="5"] .star:nth-child(-n + 5):before,
.star-rating[data-value="6"] .star:nth-child(-n + 6):before,
.star-rating[data-value="7"] .star:nth-child(-n + 7):before,
.star-rating[data-value="8"] .star:nth-child(-n + 8):before,
.star-rating[data-value="9"] .star:nth-child(-n + 9):before,
.star-rating[data-value="10"] .star:nth-child(-n + 10):before {
color: #fff455;
text-shadow: 2px 2px #c3bb41;
}
</style>
</head>
<body>
<div class="center">
<input type="number" value="0" min="0" max="3" class="star-control" data-target="#star-1">
<div id="star-1" class="star-rating" data-value="0">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>
</div>
<div class="center">
<input type="number" value="0" min="0" max="5" class="star-control" data-target="#star-2">
<div id="star-2" class="star-rating" data-value="0">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>
</div>
<div class="center">
<input type="number" value="0" min="0" max="10" class="star-control" data-target="#star-3">
<div id="star-3" class="star-rating" data-value="0">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>
</div>
<script type="text/javascript">
function onStarControlChange() {
var $this = $(this),
value = $this.val(),
target = $this.data('target');
$(target).attr('data-value', value);
}
$('.star-control').on('change', onStarControlChange);
</script>
</body>
</html>关于javascript - CSS Sprite 和背景定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32872720/