CSS-什么是更好的混合文本和图像的解决方案？

我们必须设计一些文本，如下所示：

Text in English XXX Text in English XXX Text in English.

而XXX则应替换为与英文文本高度相同的图像

我想知道是否有更好的解决办法

多谢各位

////////更新////////////////

XXX in fact are text translated in other language.

比如说,， 一句话如下：

Text in English XXX Text in English XXX Text in English.

苹果、橘子和香蕉

我们必须把上面这行改成

苹果（XXX）、橘子（XXX）和香蕉（XXX）

这里是不同水果的外文翻译。

---

我们必须在unicode中使用图像而不是文本的原因是，我们不想强制用户选择不同的字符集来查看页面。

您可以尝试在ems中同时指定行高和图像高度。图像宽度必须是高度的倍数才能保持正确的比例。

鉴于您几乎没有给我们任何具体细节，很难说出您想要什么，但这里有一些方法可以实现您想要的

最简单的方法是使用

img

标记添加图像。默认情况下，图像是内联元素，并且由于您声明它们与文本具有相同的高度，因此我认为仅将它们添加进来没有任何问题，就像这里的图像一样。只要你给它正确的

alt

文本，它就可以了

如果确实需要图像文本替换，则可以使用通常的方法，例如：

#replace {
    text-indent: -9999px;
    background: url('http://i.stack.imgur.com/da29E.png') no-repeat center bottom;
    width: 16px;
    height: 14px;
    display: inline-block;
}

其中，

#replace

是段落内的

span

，如：

<p>The <span id="replace">Flag of the United States of America</span> is a brilliant flag. </p>

美利坚合众国的国旗是一面灿烂的旗帜

正如您所看到的，它有点麻烦，并且与

img

方法相比，它没有任何优势。查看此处的文本替换版本：

我们应该看到您的解决方案，告诉您是否有更好的解决方案。