2

我有一个关于评级显示的星号的问题。我有代码

<style>
    .goldstardiv { color: gold; }
    .goldgraystardiv { color: khaki; }
    .graystardiv { color: gray; }
</style>
<div class="goldstardiv">&#x2605;</div>
<div class="goldgraystardiv">&#x2605;</div>
<div class="graystardiv">&#x2605;</div>

如何用 css 显示具有灰色左侧站点和黄色右侧站点的明星？

谢谢

4

3 回答 3

4

在彩色的上方放置一个带有半灰色星形（宽度 50% 溢出隐藏）的 div。

html:

<div class="goldstardiv">
    &#x2605;
    <div class="halfstar">&#x2605;</div>
</div>

CSS：

.goldstardiv { color: gold; position: relative; }
.halfstar {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;    
    color: #666;
    overflow: hidden;
}

半星以像素为单位，但如果你愿意，可以用它来获得百分比。

示例：http: //jsfiddle.net/LV7SS/2/

于 2012-12-03T12:42:05.857 回答
2

使用纯 CSS 做到这一点的唯一方法是使用像这样的讨厌的 hack ，这并不理想。这使用负边距（margin-left: -104px;）将灰色 div 置于金色 div 之上。

你最好使用图像和精灵

于 2012-12-03T12:34:40.100 回答
1

您可以通过使用 CSS 中的 content:after 属性来在灰色星上显示第二个金色星，如下所示：

<style type="text/css">
.star {
    display: inline-block;
    width: 20px;
    text-align: center;
}
.star.gold { color: gold; }
.star.gold-gray { color: gray; }
.star.gold-gray:after {
    display: inline-block;
    color: gold;
    content: '\2605';
    position: absolute;
    margin-left: -16px;
    width: 8px;
    overflow: hidden;
}
.star.gray { color: gray; }​
</style>

<div class="star gold">&#x2605;</div>
<div class="star gold-gray">&#x2605;</div>
<div class="star gray">&#x2605;</div>​

您确实需要具体说明尺寸才能正常工作，以便您可以正确设置半星上的负边距，并使用溢出将其裁剪为半角：隐藏，但它会满足您的需求。

（我没有在示例中指定字体大小，您可能也想这样做）

这种技术的好处是您不需要在 html 中为半星添加额外的标记，只需要正确的类即可。

编辑

不知何故，我将错误的链接粘贴到我的 jsFiddle 中，从以前的版本中，我仍在破解解决方案，而不是工作的解决方案......可能值得为此投反对票，但它确实有效！

看到它在这里工作。

编辑 2

cimmanon 提到星星“不是真正的内容”，这是非常正确的，但由于问题要求使用 CSS 解决方案来解决问题，所以我制作了一个不需要包含所有可能组合的 sprite-map 的问题。

不是因为我有任何反对精灵贴图的东西——我没有——只是因为我想试一试:)

仍然包括<span>每个明星的元素（很难避免），但除此之外，这都是很好的标记，我认为对于屏幕阅读器来说效果很好。

在这里查看。

<style type="text/css">
.stars .label {
    width: 1px;
    color: transparent;
    overflow: hidden;
    position: absolute;
}
.star {
    display: inline-block;
    width: 20px;
    text-align: center;
}
.star:before {
    display: inline-block;
    content: '\2605';
}
.star.on { color: gold; }
.star.half { color: gray; }
.star.half:after {
    display: inline-block;
    color: gold;
    content: '\2605';
    position: absolute;
    margin-left: -16px;
    width: 8px;
    overflow: hidden;
}
.star.off { color: gray; }​
</style>

<div class="stars">
    <span class="label">One and a half start (out of three)</span>
    <span class="star on"></span>
    <span class="star half"></span>
    <span class="star off"></span>
</div>​
于 2012-12-03T12:42:13.673 回答