jquery - 图像上的动态文本位置

Question

我有上面的图片，其中各个方面的大小都被覆盖并以字母的形式显示；其中一些是e、s、d；应该是动态来自数据库的数字。

我知道如何通过后端实现这一点，但是我不太确定如何将这些数字动态放置在图像上。

任何帮助都将是 gr8 的帮助。

Answer 1

如果您不想使用 SVG，则需要将 img 放在具有 position: relative 的 div 中，并且然后你可以在数字需要的地方附加 top 和 left css 属性

https://jsfiddle.net/stevenkaspar/pk9bfzcw/

<div style='position: relative;' id='imageContainer'>
  <img src='http://i.stack.imgur.com/k9vQS.jpg'/>
</div>

<script>
var letter = {
  label: '5',
  top: 80,
  left: 5
}

var letter_elem = document.createElement('span');
letter_elem.style.top = letter.top + '%';
letter_elem.style.left = letter.left + '%';
letter_elem.innerHTML = letter.label;
letter_elem.className = 'number';

document.getElementById('imageContainer').appendChild(letter_elem);
</script>

<style>
.number {

    position: absolute;
    top: -1000px;
    left: -1000px;
    font-size: 28px;
    min-width: 32px;
    background: #fff;
    text-align: center;

}
</style>