Css 如何更改颜色

在gd star ratings插件中，他们使用css sprite图像来显示星星的状态，并调整其宽度以显示一个项目的评级

例如，他们在背景中使用图像“gd star rating/stars/oxygen/stars20.png”

例如，我有三颗星，所以它的宽度是60像素

.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颗星

---

这是可以实现的吗？

您可以在星号上添加或更改类，并使用更具体的方式基于此应用样式：

.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;
}