1

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

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

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

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

图片尺寸：宽度：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

4

2 回答 2

0

在您的网站上，您有

.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;
}
于 2014-01-16T22:45:44.603 回答
0

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

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

如果这是您的酒吧，有 5 个“骷髅”可见。那么你需要做的就是当你想显示更少的“头骨”时让容器变小

您可以通过为多个“头骨”添加一个额外的 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;
}

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

于 2014-01-16T22:47:16.480 回答