CSS 帮助看星星

标签 css

<分区>


要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用,以及预期结果。另请参阅:Stack Overflow question checklist

关闭 9 年前

我环顾四周,无法编写基于 5 星评级系统的 CSS 代码,该系统会根据客户反馈进行更改。感谢您的帮助。

最佳答案

您可以尝试定位 Sprite 表:

HTML:

<div class="rating one-star"></div>

CSS:

.rating
{
  background-image: url(stars.png);
  background-repeat: no-repeat;
  height: 20px;
  width: 100px;
}

/* assume a star is 20x20 */

.one-star
{
  background-position: -80px 0;
}
.two-star
{
  background-position: -60px 0;
}
.three-star
{
  background-position: -40px 0;
}
.four-star
{
  background-position: -20px 0;
}
.five-star
{
  background-position: 0 0;
}

当然,您可能希望 div 包含 5 个带有星形轮廓、悬停效果或其他类似内容的链接。这实际上取决于您要查找的内容。

关于CSS 帮助看星星,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4493972/

上一篇:jquery - 如果我有 3 个 <tr> 元素,我如何在任何一次单击时只允许突出显示一个? - CSS,jQuery

下一篇:javascript - 正在处理的链接——使用 CSS 样式还是使用 JavaScript?

相关文章:

css - 在图像上叠加文本不起作用

css - Chrome 中转换/定位 DOM 元素的问题

css - 仅在移动设备上显示导航栏菜单项字形图标 - Bootstrap

javascript - 需要 Bootstrap 列帮助

html - 使用位置 :relative and top/margin-top? 的 Firefox 4 呈现差异

html - 在 R igraph 中创建悬停按钮

jquery - 如果字体样式为斜体,IE7 在 slideToggle 上失败?

jquery - 条形图插件 - 使每个条形图都可点击(每个条形图都有不同的链接)

CSS: border-color 在 IE7-8 中使用 rgba

html - 如何在多个文件中使用基本的html代码结构