CSS精灵和背景定位

时间：2015-09-30 17:54:59

标签： javascript html css

我目前正致力于实施星级评分小部件。哪个需要使用精灵文件，如下所示

Sprite with ratings

我的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;
}

为了进一步解释我的思考过程，我传递的是一个评级值，范围从0-5到我的javascript，然后计算最终的宽度大小并将其应用到内部跨度。

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

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：2)

解释

让我们使用您在示例中提供的image。图像宽度 80px （实际上是79px，但我正在向上舍入）， 14px 高度和 5 状态： 0％< / strong>， 25％， 50％， 75％和 100％。

要将图像用作精灵，我们将创建一个名为meteor show package@version的基类，并指定图像的高度（ 14px ）和单个状态的宽度，这将是 16px （80px / 5个状态）。

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

根据状态宽度，每个类对.star属性都有不同的值。

实施例

以下是使用用户提供的图像作为精灵的示例。

background-position

附加示例

这是另一个仅使用CSS（无图像）的示例，用于其他研究目的。基于Accessible star rating widget with pure CSS，由用户connexo在评论中提供。

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

相关问题
最新问题