使用背景图像动态地将Unicode字符放在div中

Question

我有一张代表举重栏的图片：

我想在条形图的左侧和右侧放置Full Block Unicode字符（例如表示板）。

我试图用3个div来做这个：

1. 杠铃离开：位于酒吧左侧的盘子，右对齐
2. 杠铃中间：没有留空
3. 杠铃右侧：栏右侧的牌照，左对齐

以下是带盘子的div的专业代表：

我以为我可以用浮动和div宽度的百分比来做到这一点，但我没有运气。

这是我最近对js fiddle的尝试。

---

更新

我得到了我想要的答案，但根据评论，我发现使用Canvas是更好的路线。

我能用这个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> 

和这个js：

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

Answer 1

我做了一些改变你的标记和CSS。

Demo（仅在Chrome 22上测试）

HTML：

<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> 

CSS：

.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;
}​

---

正如Joachim Sauer所说，将红色方块用于div会更容易也更一致......

Another demo

HTML：

<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> 

CSS：

.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;
}​

---

在这两个演示中，你会看到一个像素“摇摆”。知道红色方块的内容我可以尝试解决它。​​