Question

所以我有一个进度条，我一直在我的网站上工作。代码如下：

CSS：

#ProgressBar {
position: relative;
width: 100%;
height: 10px;
background-color: #ddd;
border-radius: 25px; 
font-size:18px;
}
#Progress {
position: absolute;
height: 100%;
background-color: #4CAF50;
border-radius: 25px; 
}

HTML：

<div Id="ProgressBar">
<div Id="Progress" style="width: <?php echo $Variable; ?>%;"></div>.
</br>
</div>

样式中的PHP从我的SQL数据库中提取一个数字，并显示进度条填充了多少百分比。

我想进步吧，但我不想要酒吧，我想要有明星。有点像评级系统。我尝试采用这样一个简单的评级系统：

CSS：

.star span:before {
content: "\2605";
position: absolute;
width: 40%;
background-color:#339966;
}

HTML：

<div class="star">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span>.<span>☆</span>
</div>

我不知道如何将其组合在一起，我可以将其填充到某个百分比，就像我对原始进度条所做的那样。任何帮助将不胜感激。

Answer 1

您可以将重复星星的背景设置为#inner div。然后在这个div的顶部放置另一个白色背景的div来隐藏一部分星星背景。

使用PHP代码为#overlay div赋予宽度。

请注意，如果要显示完成40％的进度，则必须为#overlay div提供60％的宽度，因为它位于正确位置。

#outer {
  position: absolute;
  width: 250px;
  height: 16px;
  border: 1px solid #d8d8d8;
}

#inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/2e/Star.png');
  background-repeat: repeat;  
  z-index: 5;
}

#overlay {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
  <div id="overlay" style="width:60%"></div>
  <div id="inner"></div>
</div>

Css，html，javascript中的星形进度条

1 个答案: