javascript - 将 Unicode 字符动态放置在带有背景图像的 div 中

Question

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

我想在栏的左侧和右侧都 放置全块 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。

演示（仅在 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 用于红色方块可能更容易且更一致......

另一个演示

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

---

在这两个演示中，您都会看到一个像素“摆动”。知道红色方块的内容我可以尝试修复它。