Question

我有一个相当大的圆形图像，可以根据它的位置轻松调整它的大小。它意味着是一个或两个文本的背景图像。

基本上，在特定元素中，无论数字1或2出现在哪里，我都希望圆圈出现在文本后面，无论文本恰好位于该元素中。与文本混合的是其他可以放入而没有问题的图像。我正在通过ems对它们进行调整，以便将它们放在需要去的地方。

因此，为了使这项工作成为一个例子/问题：

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

所以，基本上，我需要文本像这样工作：

This is a paragraph (1) of the text.

其中（1）图像的大小适当，数字1位于其中心。图像可以是1.2 em以补偿文本，但我稍后会调整大小。我在javascript中这样做，但如果有人能帮我弄清楚CSS样式会是什么样的话，我可以从那里开始使用它。

关于页面的一些额外的事情是符号/文本混合必须位于一个表格单元格中，该表格单元格漂浮在div的右侧，相对定位在另一个绝对定位的div内部。不确定是否会有任何混乱的显示设置，但这就是我正在看的。感谢。

Answer 1

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

的范围内

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

查看此JSFiddle。

Answer 2

我只能看到这个使用单空格字体。将图像用于包含文本的元素的背景图像。获取字符串中“1”的索引。将background-position设置为索引的em值+ 1.如果有多次出现，则必须在包含文本的元素下面添加其他绝对定位的元素。

Answer 3

据我所知，您无法使用CSS更改背景图像的大小。如果您的图像不必动态调整大小，您可以使用相应的<span>和其他CSS规则将数字包装在background-image中。

但是，以下内容适用于支持CSS display: inline-block;的最新浏览器：

<p>
    Lorem 
    <img 
      src="http://gumOnShoe.net/NewCard/Frames/Mana/mana_circle.png" 
      style="width: 1em; height: 1em;" />
    <span 
      style="margin-left: -1em; 
             width: 1em; 
             display: inline-block; 
             text-align: center;">1</span>
    ipsum.
</p>

但就个人而言，我会创建不同大小的图像，并将它们用作背景图像，用于跨越数字。类似的东西：

<p class="big-text">
    Lorem <span class="number">1</span> ipsum
</p>
<p class="small-text">
    Lorem <span class="number">1</span> ipsum
</p>

...使用CSS：

p.big-text span.number {
    background-image: url(/big-circle.png);
}

p.small-text span.number {
    background-image: url(/small-circle.png);
}

Answer 4

由于我无法编辑上述评论，我想将其作为答案发布：

使用css3，你可能会这样做：

font-family:monospace;
font-size:2em;
padding:5px;
background: url(http://gumonshoe.net/NewCard/Frames/Mana/mana_circle.png) no-repeat center center;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;

结帐演示：http://jsfiddle.net/gWhqP/

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

4 个答案: