jquery - 向元素添加不透明覆盖

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")
    }
});

结果显示在下面的小提琴中。如何解决为数字添加叠加层的任务？还是可以通过其他方式解决？

我在这里创建了一个小提琴。

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

假设这是您将使用的实时代码，您可以尝试这样的事情吗？

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);
}