Question

我有一个超自然的网站，每个调查报告都有一个评级。在这种情况下，我的客户想要使用头骨（不是真的很重要）。网站地址是：

http://theripfiles.tv/j3upgrade/index.php/case-files/season-1

我需要显示短语“PAL Rating：”，右侧有1到5个骷髅图标。

我将我正在使用的图片附加到上面的网站页面。

图片尺寸：宽度：102px 身高135px 5行图标高度为27px 顶行有5个图标。底行有1个图标。

这是我到目前为止所做的：

.pal-rating-static 
{
    background: url("../images/icons/pal-rating5.png") 0 0 no-repeat;
    width: 102px;
    height: 27px;
    display: block;
}

.pal-rating-5 { background-position: 0 0; }
.pal-rating-4 { background-position: -27px 0; }
.pal-rating-3 { background-position: -54px 0; }
.pal-rating-2 { background-position: -81px 0; }
.pal-rating-1 { background-position: -108px 0; }

我尝试使用这个简单示例中的类似CSS，但它似乎不起作用。我错过了什么？

http://www.itsalif.info/content/displaying-star-rating-using-css-sprites

Answer 1

在您的网站上

.pal-rating-static {
background: url("../images/icons/pal-rating-static.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: block;
float: right;
}

将其更改为

.pal-rating-static {
background: url("../images/icons/pal-rating-static.png") 0 0 no-repeat;
width: 102px;
height: 27px;
display: inline-block;
}

Answer 2

我不认为你需要弄乱这个背景位置

.pal-rating-static {
    background: url("../images/icons/pal-rating5.png") 0 0 no-repeat;
    width: 102px;
    height: 27px;
    display: block;
}

如果这是你的酒吧，可见5'头骨'。那么你需要做的就是当你想要显示更少的'头骨'时使容器更小

你可以通过为'skulls'

的数字添加额外的CSS类来实现这一点

所以你最终会得到像这样的东西

.pal-rating-static.cat1 {
  width: 20px;
}

.pal-rating-static.cat2 {
  width: 40px;
}

.pal-rating-static.cat3 {
  width: 60px;
}

.pal-rating-static.cat4 {
  width: 80px;
}

希望这能解决你的问题..小提琴非常有用

如何在某些文本的右侧显示评级图标

2 个答案: