html - 是否可以将小图像放置在具有非画布 HTML 的单个字母下方？

Question

例如，我有一些这样的标记：

<div>testword</div>

我想在字母下方放置一个小图像，在字母下方放置s一个不同的小图像d。图像应该在字母下方居中，以便清楚分配给哪个字母。使用额外的 HTML 也是可以的，例如，也许我需要将每个字母包装在<span>标签或其他东西中。

是否可以在不使用画布的情况下为所有浏览器执行此操作？

Answer 1

正如评论中所建议的，您可以使用background-imageand来做到这一点padding-bottom。我已经用示例完成了小型jsfiddle，以便为您提供一些起点。

<div>te<span class='bottom-img'>s</span>twor<span class='bottom-img'>d</span></div>

span.bottom-img
{
    background:url("/img/keys.png") no-repeat 0 10px transparent;
    padding-bottom:10px;
}

但是，您需要准备图像以将它们与您的字母大小一起使用