所以我有一个进度条,我一直在我的网站上使用它。代码如下:
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>
我不知道如何将它组合到可以将其填充到一定百分比的位置,就像我对原始进度条所做的那样。任何帮助将不胜感激。
最佳答案
您可以将重复星星的背景设置到#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>
关于javascript - Css、html、javascript 中的星形进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39838547/