シンプルなJavascript/CSSテキストオーバーレイ画像

Question

これは簡単なことですが、私のウェブは錆びています。小さな画像（100px幅、125px高さ）のリストがあります。ユーザーが画像をクリックできるようにしたいのですが、クリックすると画像にオーバーレイされる数字が表示されます。

CSSやJavascriptでこれを行う「簡単な」方法はありますか？ Javasriptを使用して、クリックした画像/ divにクラスを追加することはできますが、透明な数値のオーバーレイを生成して画像領域を埋める方法はよく分かりません。私はキャンバスに描画する必要がありますか簡単な方法がありますか？

Answer 1

私は疑問を抱いています。これはかなり簡単です。

ここFIDDLE

だが、あなたがやろうと何本か？

Answer 2

数字があまり多くない場合（たとえば、100未満の場合など）、数字の入った透明な画像を表示できます。次に、あなたが言及したように異なるクラスを使用してそれらをオーバーレイするだけです。