根据值定位图像的特定部分

Question

说我有以下png

在我的HTML中，来自Ruby我获得了一个特定的评级值（0,1,2,3,4,5）。根据该值，我想显示png的特定行。

我正在考虑，根据值，分配一个特定的类，然后定义该类以专注于该png图像的特定部分（使用某个位置）。但是，我没有看到如何做到这一点，如果这是解决这个问题的最佳方式。

换句话说，如果我有以下内容：

<span id='rating'> 3 </span> 

我在想做类似的事情：

<span id='rating' class='rating_3'> <img ..></img></span>

将rating_3类定义为仅显示3颗恒星的行。

我该怎么做？

由于

Answer 1

这种东西是spritesheet，通过指定正确大小的元素来实现，表单为background-image。然后，background-position用于移动工作表以显示正确的图像。

因此，在您的情况下，您只需将每行的高度乘以评级并将其用作位置。

Answer 2

我会使用HTML5 data-*属性来设置Ruby的指定值（渲染的html）：

<span class='rating' data-rating='3.5'></span>

然后我会使用一些javascript / jQuery来动态设置png sprite文件的正确图像背景位置（如前所述）。

首先将css属性设置为.rating选择器以使用精灵图像。如果你想使用精灵中的大星星，你可以为父容器分配一个ID，例如

#rateBig .rating  {
 background-image: url('images/rating.png'); 
 background-repeat: no-repeat;
 width: 84px; 
 height: 16px;
 display: block; 
}

注意width: 84px;和height: 16px;值，它们对应于大星条纹的大小。

然后假设你有这个html来匹配我们的CSS

<ul id="rateBig">
 <li>This line is rated 3.5 stars<br /><span class='rating' data-rating='3.5'></span></li>
</ul>

javascript：

<script>
var dataRating, bkPos;
// function to set the backgroundPosition based on the value of the data-* attribute
// for the BIG stars
function getRateImageBig(dataRating){
 switch(dataRating){
  case 1:   bkPos =  "0 -19px";  return bkPos; break;
  case 1.5: bkPos =  "0 -38px";  return bkPos; break;
  case 2:   bkPos =  "0 -57px";  return bkPos; break;
  case 2.5: bkPos =  "0 -76px";  return bkPos; break;
  case 3:   bkPos =  "0 -95px";  return bkPos; break;
  case 3.5: bkPos =  "0 -114px"; return bkPos; break;
  case 4:   bkPos =  "0 -133px"; return bkPos; break;
  case 4.5: bkPos =  "0 -152px"; return bkPos; break;
  case 5:   bkPos =  "0 -171px"; return bkPos; break;
  default:  bkPos =  "0 0"; return bkPos;
 }
}
// go through each selector and get the value of the data-rating attribute
// call the getRateImageBig function to set the proper background position
$(document).ready(function() {
 $("#rateBig .rating").each(function(i){
  var selector = $(this);
  dataRating = selector.data("rating"); 
  getRateImageBig(dataRating);
  selector.css({"backgroundPosition": bkPos});
 }); // each
}); //  ready
</script>

基本上你可以为小星星做同样的事情。

BTW，我使用spritecow online tool来获取精灵每个元素的正确背景位置。

请参阅DEMO HERE

Answer 3

Alist apart有一个很好的css精灵教程cssSprites