css - 如何更改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;
}