【问题标题】：CSS sprites and background positioningCSS 精灵和背景定位
【发布时间】：2015-09-30 17:54:58
【问题描述】：

我目前正在实施一个星级小部件。其中需要用到一个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 的评级值，然后计算最终宽度大小并将其应用于内部跨度。

目前我正在尝试显示初始开始，即空星。但相反，我在我的页面上看到了所有的星星。

【问题讨论】：

请也显示你的 javascript 代码。或者如果你能在小提琴中重现这个问题，那真的很有帮助......
这可以在没有任何图像和 Javascript 的情况下实现。 lea.verou.me/2011/08/…

标签： javascript html css

【解决方案1】：

说明

让我们使用您在示例中提供的image。图片有 80px 宽度（实际上是 79px，但我正在四舍五入），14px 高度和 5 状态：0%、25%、50%、75% 和 100%。

要将图像用作精灵，我们将创建一个名为 .star 的基类，并指定图像的高度 (14px) 和单个状态的宽度，即 16px（80px / 5 个状态）。

默认状态将是精灵中的第一个状态 (0%)。之后，我们为每个附加状态创建一个额外的 CSS：25%、50%、75% 和 100%.

根据状态宽度，每个类的background-position 属性值都不同。

示例

这是一个使用用户提供的图像作为精灵的示例。

<!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在cmets中提供。

<!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>

【讨论】：

我看到了定位是如何工作的，但我仍在试图掌握如何显示，例如，4/5 的评级，前四颗星的位置为 -64px 0，最后一个位置从位置 - 16px 0. 我是不是走对了这条路？
要获得 4/5 的评分，您可以使用 100% 的 4 星和 0% 的 1 星。事实上，没有“正确的方法”。有很多方法可以做到这一点！
对不起，我还是没看懂，怎么显示 100% 的 4 星
哦，我明白了，我可能忘了提到评级值是动态的，它的范围可以从 0 到 5，所以你可以得到 2.45 的评级。这会将这些类动态添加到 span 元素中，并为您的 js 中的每个可能场景覆盖这些类

【解决方案2】：

您已经使用了所有组合图像的宽度，而您需要定义该特定图像的宽度。使用background-position修改内部图片的位置

#star-ratings,
#ratings {
  background: url(http://i.stack.imgur.com/ZSMMj.png) 0 0 repeat-x;
  display: block;
  width: 14px; /* Modified */
  height: 14px;
  background-position: 0px;
}

.ratings1 {
  background: url(http://i.stack.imgur.com/ZSMMj.png) 0 0 repeat-x;
  display: block;
  width: 14px; 
  height: 14px;
  background-position: -16px;
}

First rating
<span id="star-ratings" class="containers">
      <span id="ratings"></span>
</span>
Second rating
<span id="star-ratings" class="containers">
      <span class="ratings1"></span>
</span>

【讨论】：

宽度不应该是包含所有 5 颗星的大小
不，它被背景位置覆盖。尝试添加background-position: 15px 以查看最后一颗星。
好的，我明白了，但是如果我动态地通过评级，比如 4/5，那么前四颗星需要填充，最后一颗星需要为空
因此您需要为每个精灵图像创建单独的类，然后在 JavaScript 中分配类似 if(rating == 4) { showImgClass4(); } 的内容。