为元素添加不透明叠加层

Question

我被要求以某种方式显示一些数字 - 见图像：

正如您在图像中看到的那样，我需要在每个数字的上半部分使用某种灰色覆盖，以使字体的一部分变得更暗。 （至少，添加一个半透明覆盖层是我想象这可以解决的。）

我从一个xml节点获取这些数字，并用这段脚本分割数字：

var text = $("div.balance_number span");
var characters = $("div.balance_number").text().split("");
$("div.balance_number").empty();
$.each(characters, function (i, el) {
    $("div.balance_number").append("<span>" + el + "</span")
});
$("div.balance_number span").each(function (index) {
    var pt = $(this).text();
    if (pt == ",") {
        $(this).addClass("empty")
    }
});

结果显示在下面的小提琴中。如何解决为数字添加叠加层的任务？或者可以用另一种方式解决？

我创建了一个fiddle here。

Answer 1

http://jsfiddle.net/tyuHb/5/

<div class="balance">
    <div class="balance_number">
        <span><span></span>9</span>
        <span><span></span>5</span>
        <span class="empty">,</span>
        <span><span></span>3</span>
        <span><span></span>5</span>
    </div>
</div>

CSS：

.balance_number > span {         /* note the ">" */
    position:relative;
    /* all other code ...*/

和

.balance_number span > span {    /* note the ">" */
    position:absolute;
    left:0;
    height:24px;
    width:30px;
    background:rgba(0,0,0,0.4);
}

Answer 2

假设这是您正在使用的实时代码，您可以尝试this之类的内容吗？

<强> HTML

<div class="balance">
  <div class="balance_number">
    <div class="left">
        <div class="dark-left"></div>  
        <span>9</span>
        <span>5</span>
    </div>
    <span class="empty">,</span>
    <div class="right">
        <div class="dark-right"></div>
        <span>3</span>
        <span>5</span>
    </div>
  </div>
</div>

<强> CSS

.left, .right {
    position: relative;
    width: 62px;
    float: left;
}
.dark-left, .dark-right {
    width: 62px;
    height: 25px;
    position: absolute;
    background-color: rgba(0,0,0,0.3);
}