2

我需要为我的排名应用程序使用图标。

我想从使用 icon-star-empty 的 5 个空星图标开始。

然后将它们与 icon-star 重叠以根据等级填充它们。

font-awesome 只有一半的空星，缺少一半的星。

有谁知道我是否可以重叠图标来实现我的目标？

编辑：这是 5 个完整的空星形图标的代码：

<i class="icon-star-empty icon-large"><i class="icon-star-empty icon-large"><i class="icon-star-empty icon-large"><i class="icon-star-empty icon-large"><i class="icon-star-empty icon-large"></i></i></i></i></i>

我想把它和这个重叠：<i class="icon-star-half icon-large"></i> 10x

4

1 回答 1

7

如果我理解正确，这就是您要执行的操作：

<div id="empty">
<img class="stars empty" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_17.gif">
</div>

<div id="half">
<img class="stars empty" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_17.gif">
<img class="stars half" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_16.gif">
</div>

<div id="full">
<img class="stars empty" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_17.gif">
<img class="stars half" src="http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_16.gif">
<img class="stars starfull" src="http://cdn1.iconfinder.com/data/icons/icojoy/shadow/standart/png/24x24/001_15.png">
</div>

我将每个案例都包含在一个 div 中。要以您尝试的方式覆盖图像，您需要分配一个绝对位置。这是一个快速的 CSS，它说明了它将如何为您工作：

div {
    position:relative;
    height:2em;
}
.stars {
    position:absolute;
    top:0;
    left:0;
}

希望这是你想要做的。您可以将其应用于任何类型的 html 标记元素，并且可以多次应用，10 次，100 次 =)

编辑： 我再次阅读了您的问题和所有评论......我认为您可以通过更改背景和/或使用重叠背景而不是重叠 html 元素来更轻松地做到这一点。我从上面使用了您的代码并说明了我在小提琴上的意思：http: //jsfiddle.net/38vHj/

无论如何，在javascript（或php或您想要处理信息的任何地方）中交换类要容易得多......然后使用特定的css类选择器。

最终解决方案： 所以是的……您可以重叠任何 html 标签元素！现在经过很多来回，我给你写了你想要的并将它发布在小提琴上：jsfiddle.net/ddXDp/2

So the end result is an additional empty star element under the half star element. Now you just have to arrange and style the elements the way you wanted =)

于 2013-02-27T13:46:32.867 回答