html - 非キャンバス HTML を使用して個々の文字の下に小さな画像を配置することはできますか?

Question

たとえば、次のようなマークアップがあります。

<div>testword</div>

s文字の下に小さな画像を配置し、文字の下に別の小さな画像を配置したいと考えていdます。どの文字に割り当てられているかが明確になるように、画像は文字の下の中央に配置する必要があります。追加の HTML を使用することも問題ありません。たとえば、各文字を<span>タグなどでラップする必要があるかもしれません。

キャンバスに頼らずにすべてのブラウザでこれを行うことは可能ですか?

Answer 1

コメントで提案されているように、これを行うには と を使用background-imageし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;
}

ただし、文字サイズで使用するには画像を準備する必要があります