如何更改gd评分星星颜色

Question

在gd星级评分插件中，他们拍摄一张css sprite图片以显示星星的状态，并调整其宽度以显示项目评分的星星数量。

例如在背景中使用图片“gd-star-rating/stars/oxygen/stars20.png”。

例如，我有3颗星，所以需要60px的宽度。

.starsbar.gdsr-size-20 a.s3 { 
width: 60px; 
} 

和全球代码：

.gdsr-oxygen .starsbar.gdsr-size-20 a:hover { 
background: url('../stars/oxygen/stars20.png') repeat-x 0px -20px !important; 
} 

我的问题是，我该如何使用我的自定义图像这些恒星的颜色改变？我想有

红 - 1星 黄色 - 2星级

逐步，绿色为5星。

是否可以实现？

Answer 1

您可以添加或更改对明星类，并应用基于该使用更为具体的样式：

.gdsr-oxygen .starsbar.gdsr-size-20 a { 
    background: url('../stars/oxygen/stars20.png') repeat-x 0px -20px !important; 
} 

.gdsr-oxygen .starsbar.gdsr-size-20 a.red { 
    background: url('../stars/oxygen/stars20_red.png') repeat-x 0px -20px !important; 
} 

您还可以扩展原有精灵并改变其位置，以显示红色或黄色的星星：

.gdsr-oxygen .starsbar.gdsr-size-20 a.red { 
    background-position: 0px -40px !important; 
}