Javascript 在具有背景图像的div中动态放置Unicode字符

我有一个代表举重杆的图像：

我想将字符（例如，表示板）放在条的左侧和右侧

我试着用3个div来做这件事：

杠铃左：位于杠铃杆左侧的板，右对齐

杠铃中间：没有任何内容留白

杠铃右侧：位于杠铃右侧的板，左对齐

这是一个专业的代表性的DIV与一个板块：

我想我可以用浮动和div宽度的百分比来实现这一点，但我没有任何运气

这是我最近的一次尝试

---

更新 我得到了我想要的答案，但根据评论，我发现使用画布是更好的方法

我能够使用此html获得更好的结果：

<div data-role="page" id="p1">
    <div  data-role="header"><h1>Header Page 1</h1></div>

    <div  data-role="content">
        <div class="bar-canvas">
            <canvas id="_barCanvas"></canvas>
        </div>
    </div>
    </div>

    <div  data-role="footer"><h4>Footer</h4></div>
</div> 

---

我做了一点改变你的标记和css

（仅在铬22上测试）

HTML:

---

如前所述，在红色方块中使用div可能更容易、更一致

HTML:

---

---

在这两个演示中，您将看到像素“抖动”。知道红方块的内容，我可以试着修复它。

如果您想要表示的都是正方形、全彩色的方块，为什么不直接使用大小正确的

？或者更好：用画布画你想画的东西。@joachimsauerty。清晰地描绘出实现最终结果的更好途径。

var WIDTH_FACTOR    =    .8; //80% of screen size
var HEIGHT_FACTOR    =    .1; //10% of height size
var WEIGHT_SPACER    =     2;
var ctx = $("#_barCanvas")[0].getContext("2d");

ctx.canvas.width  = (window.innerWidth    *    WIDTH_FACTOR);
ctx.canvas.height = (window.innerHeight    *    HEIGHT_FACTOR);

var bar_width    =    ctx.canvas.width * .8;
var bar_height    =    ctx.canvas.height * .1;
var bar_x        =    (ctx.canvas.width - bar_width)
var bar_y        =    (ctx.canvas.height * .5)    

var plate_stop_width    =    bar_width * .01;
var plate_stop_height    =    bar_height * 4;
var plate_stop_y        =    bar_y - ((plate_stop_height - (bar_y / 2)));
var rubber_plate_height    =    bar_height * 8;
var rubber_plate_y        =    (ctx.canvas.height / 2) - (rubber_plate_height/2) + (bar_height/2);
var small_plate_height    =    plate_stop_height;
var small_plate_y        =    plate_stop_y;
var left_plate_stop_x    =    bar_x + (bar_width * .3);
var right_plate_stop_x    =    bar_x + (bar_width * .7);

//Draw Bar
ctx.fillStyle = "black";
ctx.fillRect (bar_x, bar_y, bar_width, bar_height);

//Draw Plate stop left
ctx.fillStyle = "black";
ctx.fillRect (left_plate_stop_x, plate_stop_y, plate_stop_width, plate_stop_height);

//Draw Plate stop right
ctx.fillStyle = "black";
ctx.fillRect (right_plate_stop_x, plate_stop_y, plate_stop_width, plate_stop_height);

//Draw 45 lb Plates
var plate_width      = bar_width * .04;
var current_plate_height     = 0;

ctx.fillStyle    =    'red';
ctx.fillRect(left_plate_stop_x - plate_width, rubber_plate_y, plate_width, rubber_plate_height);

ctx.fillStyle    =    'red';
ctx.fillRect(right_plate_stop_x + plate_stop_width, rubber_plate_y, plate_width, rubber_plate_height);

<div data-role="page" id="p1"> 
    <div  data-role="header"><h1>Header Page 1</h1></div> 

    <div  data-role="content">
    <div class="barbell-background">
        <div class="barbell-left">&#x2588;</div>
        <div class="barbell-right">&#x2588;</div>
    </div>
    </div> 

    <div  data-role="footer"><h4>Footer</h4></div> 
</div> 

.barbell-background
{
    font-size:3em;
    line-height:1.4em;
    height:1.4em;
    position:relative;

    background-image:url('http://i.stack.imgur.com/ZmFY4.png');
    background-repeat:    no-repeat;
    background-position: center;
}
.barbell-left, .barbell-right
{
    position:absolute;
    color:red;
}
.barbell-left
{
    right:50%;
    margin-right:146px;
}
.barbell-right
{
    left:50%;
    margin-left:145px;
}​

<div data-role="page" id="p1"> 
    <div  data-role="header"><h1>Header Page 1</h1></div> 

    <div  data-role="content">
    <div class="barbell-background">
        <div class="barbell-left"></div>
        <div class="barbell-right"></div>
    </div>
    </div> 

    <div  data-role="footer"><h4>Footer</h4></div> 
</div> 

.barbell-background
{
    font-size:3em;
    line-height:1.3em;
    height:1.3em;
    position:relative;

    background-image:url('http://i.stack.imgur.com/ZmFY4.png');
    background-repeat:    no-repeat;
    background-position: center;
}
.barbell-left, .barbell-right
{
    position:absolute;
    background:red;
    width:0.5em;
    height:100%;
}
.barbell-left
{
    right:50%;
    margin-right:146px;
}
.barbell-right
{
    left:50%;
    margin-left:144px;
}​