使用图像创建体验级别栏 [英] Creating experience level bar with images
问题描述
我正在尝试创建一个增量XP栏，根据用户的体验，突出显示橙色栏的百分比。一旦橙色条填满，它就会重置并填充一个蓝色泡泡。
1个泡泡= 1个橙色条= 10％的等级
http：//www.imgim .com / sample_solution2b-01.jpg [ ^ ]
有什么建议吗？
我尝试了什么：
我尝试过使用这段代码，但我不确定它能否满足我的需求：
I'm trying to create an incremental XP Bar that highlights a percentage of the Orange bar based on how much experience the user has. Once the orange bar fills, it resets and one blue bubble will be filled.
1 bubble = 1 orange bar = 10% of a Level
http://www.imgim.com/sample_solution2b-01.jpg[^]
Any suggestions?
What I have tried:
I have tried working with this code, but I'm not sure it's going to work for what I need:
<html>
<head>
<style>
/* CSS ONLY XP BAR */
.graph { width: 300px; height: 30px; margin-left: auto; margin-right: auto; border: 1px solid #888; /* FALLBACK */ background-color: #CCC; /* SAFARI 4, CHROME 1-9, IOS 3.2-4.3, ANDROID 2.1-3.0 */ -webkit-gradient(linear, left top, right top, from(#A8A8A8), to(#CCC)); /* SAFARI 5.1, IOS 5.0-6.1, CHROME 10-25, ANDROID 4.0-4.3 */ background-image: -webkit-linear-gradient(left, #A8A8A8, #CCC); /* FIREFOX 3.6 – 15 */ background-image: -moz-linear-gradient(center top, #A8A8A8, #CCC); /* OPERA 15+, CHROME 25+, IE 10+, FIREFOX 16+, SAFARI 6.1+, IOS 7+, ANDROID 4.4+ */ background-image: linear-gradient(to right, #A8A8A8, #CCC); position: relative;
}
.bar { height: 29px; /* FALLBACK */ background-color: red; /* SAFARI 4, CHROME 1-9, IOS 3.2-4.3, ANDROID 2.1-3.0 */ -webkit-gradient(linear, left top, right top, from(darkred), to(red)); /* SAFARI 5.1, IOS 5.0-6.1, CHROME 10-25, ANDROID 4.0-4.3 */ background-image: -webkit-linear-gradient(left, darkred, red); /* FIREFOX 3.6 – 15 */ background-image: -moz-linear-gradient(left, darkred, red); /* OPERA 15+, CHROME 25+, IE 10+, FIREFOX 16+, SAFARI 6.1+, IOS 7+, ANDROID 4.4+ */ background-image: linear-gradient(to right, darkred, red);
}
.xpValue { position: absolute; text-align: center; width: 100%; margin: 0px; line-height: 30px;
}
/* END XP BAR */
</style>
</head>
<body>
<div class="graph round"><div class="bar round" style="width:34%"><span class="xpValue">Current XP / Level XP</span></div></div>
</body>
</html>
推荐答案
有顶部有灰色和彩色圆形标记的两个图像。如果img元素，请使用JavaScript更改src属性： Element.setAttribute（） - Web API | MDN [ ^ ]。
对于水平框内的彩条，你只需使用风格的$div属性宽度由JavaScript设置：
Have two images of round marks on top, gray and colored. Have the lime ifimgelements and change thesrcattribute with JavaScript: Element.setAttribute() — Web APIs | MDN[^].
For color bar inside a horizontal frame, you can use just аdivwith the style propertywidthset by JavaScript:
myTrackbar.style.width = value;你的一些元素与其他元素重叠;这是通过组合CSS属性位置：相对和位置：绝对，相对于底部，绝对顶部来实现的：< a href =https://developer.mozilla.org/en-US/docs/Web/CSS/position>位置 - CSS | MDN [ ^ ]。
这有点违反直觉：绝对用于重叠，实际上是相对于父母如果元素的样式为 relative ;此相对位置和大小由样式值左，顶部，右<的组合控制/ code>或 bottom 。尝试和观察者比解释更容易。
基本上，这就是你所需要的。请尝试询问一些后续问题是否有效。
Some of your elements overlap others; this is achieve by combining the CSS property position: relative and position: absolute, relative underneath, absolute on top: position — CSS | MDN[^].
It's a bit counter-intuitive: absolute is used for overlapping and is actually relative to the parent element, if it is styled as relative; this relative position and size is controlled by combination of style value left, top, right or bottom. It's easier to try and observer, than to explain.
Basically, that's all you need. Please try and ask some follow-up question is something doesn't work.
这篇关于使用图像创建体验级别栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http：//www.imgim .com / sample_solution2b-01.jpg](\"http://www.imgim.com/sample_solution2b-01.jpg\"){kind=link}