我正在尝试将HTML进度条设置为健康栏。
我试图让它看起来像健康值
我试过这个但没有工作
.progressplayer[value]::-webkit-progress-bar {
background-color: #eee;
}
.progressplayer[value]::-webkit-progress-value {
background-color: #FF0000;
}
<progress class="progressplayer" id="playerhealth" value="100" max="100"></progress>
对基督徒的评论回答:
<div class="progress-container">
<progress id="playerhealth" *ngIf="state==1" id="playerhealth" value="100" max="100"></progress>
<p class="progress-label">
{{playerhp}}
</p>
<progress id="enemyhealth" *ngIf="state==1" id="enemyhealth" value="100" max="100"></progress>
<p class="progress-label">
{{mhp}}
</p>
</div>
这个我不能显示第二个进度标签。
答案 0 :(得分:1)
您需要重置progress
默认appearance
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;
}
.progressplayer[value]::-webkit-progress-bar {
background-color: green;
}
.progressplayer[value]::-webkit-progress-value {
background-color: #FF0000;
}
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;
}
<progress class="progressplayer" id="playerhealth" value="80" max="100"></progress>
答案 1 :(得分:1)
由于progress
元素不允许您在进度条顶部本地添加文本,因此我们必须使用解决方法:在进度条顶部放置标签。
至于条形的样式,您可以直接设置progress
元素的样式,并使用伪元素定位-webkit-progress-bar
和-webkit-progress-value
:
.progress-container {
position: relative;
}
.progress-container progress {
background-color: #eee;
height: 40px;
}
.progress-container progress::-webkit-progress-bar {
background-color: #eee;
}
.progress-container progress::-webkit-progress-value {
background-color: red;
}
.progress-container .progress-label {
position: absolute;
top: 7px;
margin: 0;
left: 65px;
font-size: 22px;
}
&#13;
<h1>Player health:</h1>
<div class="progress-container player-health">
<progress class="progressplayer" id="playerhealth" value="80" max="100"></progress>
<p class="progress-label">
80%
</p>
</div>
<h1>Enemy health:</h1>
<div class="progress-container enemy-health">
<progress class="progressplayer" id="playerhealth" value="80" max="100">
</progress>
<p class="progress-label">
80%
</p>
</div>
&#13;
您必须使用标签position
,这取决于您想要如何定位标签并设置进度条的样式。