javascript - 创建使用图像和文本的内联符号

Question

我有一个尺寸相当大的圆形图像，可以很容易地根据它的位置调整它的大小。它的意思是作为一个或两个文本字符的背景图像。

基本上，在特定元素中，无论数字 1 或 2 出现在哪里，我都希望圆圈出现在文本后面，无论文本恰好位于该元素中的何处。与文本混合在一起的是其他图像，可以毫无问题地放入。我正在按 em 调整它们的大小，以将它们放在需要去的地方。

所以为了使这个工作成为一个例子/问题:

这是图像:http://gumOnShoe.net/NewCard/Frames/Mana/mana_circle.png

所以，基本上，我需要这样的文本:

This is a paragraph (1) of the text.

其中 (1) 将图像适当缩小，数字 1 居中。图像可以是 1.2 em 以补偿文本，但我稍后会调整它的大小。我在 javascript 中执行此操作，但如果有人可以帮助我弄清楚 CSS 样式将是什么，我可以从那里开始。

关于该页面的一些其他事情是，符号/文本混合体必须位于 float 到 div 右侧的表格单元格内，这是相对定位的，位于另一个绝对定位的 div 内。不确定其中任何一项是否会干扰显示设置，但这就是我正在查看的内容。谢谢。

Answer 1

您需要将 (1) 包含在设置为 display: inline-block;

的范围内

这将赋予 span block 元素功能(设置背景图像和宽度)，同时仍与文本一起流动。您可以使用属性 background-size 并将其设置为与跨度相同的宽度来更改背景图像的大小。

看看这个 JSFiddle .