動的イメージのテーブルにオーバーレイラベルを追加するにはどうすればよいですか？

Question

イメージのテーブルにオーバーレイラベルを追加する必要があります。これらのイメージは毎回ランダムにシャッフルされますが、各イメージのコーナーの上部に常にロケーション番号が表示されます。 HTMLを使用して追加するにはどうすればよいですか？ サンプルを見てみます：

は、ここで私は私の画像にラベルを追加するために何を追加する必要があり、私のテーブルのコードですか？

<table id="userArrayTable" > 
<tr id="trHeader"> 
<td id="td">1</td> <td id="td">2</td> <td id="td">3</td> <td id="td">4</td> 
</tr> 
<tr> 
<td><img src="images/foodicons/food-1.jpg" width="50" height="50"/></td> <td><img src="images/foodicons/food-2.jpg" width="50" height="50"/></td> <td><img src="images/foodicons/food-3.jpg" width="50" height="50"/></td> <td><img src="images/foodicons/food-4.jpg" width="50" height="50"/></td> 
</tr> 

<tr id="tr2"> 
<td><img src="images/fruitsicons/fruites-1.jpg" width="50" height="50"/></td> <td><img src="images/fruitsicons/fruites-2.jpg" width="50" height="50"/></td> <td><img src="images/fruitsicons/fruites-3.jpg" width="50" height="50"/></td> <td><img src="images/fruitsicons/fruites-4.jpg" width="50" height="50"/></td> 
</tr> 

<tr> 
<td><img src="images/animalsicons/animal-1.jpg" width="50" height="50"/></td> <td><img src="images/animalsicons/animal-2.jpg" width="50" height="50"/></td> <td><img src="images/animalsicons/animal-3.jpg" width="50" height="50"/></td> <td><img src="images/animalsicons/animal-4.jpg" width="50" height="50"/></td> 
</tr> 

<tr id="tr4"> 
<td><img src="images/jobsicons/job-1.jpg" width="50" height="50"/></td> <td><img src="images/jobsicons/job-2.jpg" width="50" height="50"/></td> <td><img src="images/jobsicons/job-3.jpg" width="50" height="50"/></td> <td><img src="images/jobsicons/job-4.jpg" width="50" height="50"/></td> 
</tr> 

</table> 



@import url(https://fonts.googleapis.com/css?family=Roboto:300); 

.login-page { 
    width: 360px; 
    padding: 0 0 0; 
    margin: auto; 
} 
.form { 
    position: relative; 
    z-index: 1; 
    background: #FFFFFF; 
    max-width: 360px; 
    margin: 0 auto 100px; 
    padding: 45px; 
    text-align: center; 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
} 
.form input { 
    font-family: "Roboto", sans-serif; 
    outline: 0; 
    background: #f2f2f2; 
    width: 100%; 
    border: 0; 
    margin: 0 0 15px; 
    padding: 15px; 
    box-sizing: border-box; 
    font-size: 14px; 
} 
.form button { 
    font-family: "Roboto", sans-serif; 
    text-transform: uppercase; 
    outline: 0; 
    background: #4CAF50; 
    width: 100%; 
    border: 0; 
    padding: 15px; 
    color: #FFFFFF; 
    font-size: 14px; 
    -webkit-transition: all 0.3 ease; 
    transition: all 0.3 ease; 
    cursor: pointer; 
} 
.form button:hover,.form button:active,.form button:focus { 
    background: #43A047; 
} 
.form .message { 
    margin: 15px 0 0; 
    color: #b3b3b3; 
    font-size: 12px; 
    padding-top: 10px; 

} 
.form .message a { 
    color: #DBEFDC; 
    text-decoration: none; 
} 
.form .register-form { 
    display: none; 
} 
.container { 
    position: relative; 
    z-index: 1; 
    max-width: 300px; 
    margin: 0 auto; 
} 
.container:before, .container:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 
.container .info { 
    margin: 50px auto; 
    text-align: center; 
} 
.container .info h1 { 
    margin: 0 0 15px; 
    padding: 0; 
    font-size: 36px; 
    font-weight: 300; 
    color: #1a1a1a; 
} 
.container .info span { 
    color: #4d4d4d; 
    font-size: 12px; 
} 
.container .info span a { 
    color: #000000; 
    text-decoration: none; 
} 
.container .info span .fa { 
    color: #EF3B3A; 
} 
body { 
    background: #76b852; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(right, #76b852, #8DC26F); 
    background: -moz-linear-gradient(right, #76b852, #8DC26F); 
    background: -o-linear-gradient(right, #76b852, #8DC26F); 
    background: linear-gradient(to left, #cccccc, #cccccc); 
    font-family: "Roboto", sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;  
} 

#userArrayTable td { 
padding:0px 8px; 
height:10px; 
font-size:18px; 
font-weight:bold; 
text-align:center; 
} 

#trHeader 
{ 
background-color:#CCCCCC; 
color:#000; 
font-size:40px; 
} 

Answer 1

あなたはそれがこのようなIMGの上にあることをそれぞれimgとスタイル後span要素を追加することができます。

#userArrayTable td { 
 
    position:relative; 
 
} 
 
#userArrayTable span { 
 
    position:absolute; 
 
    right:10px; 
 
    bottom:10px; 
 
    z-index:10; 
 
    padding:10px 15px; 
 
    border-radius:50%; 
 
    background:purple; 
 
    color:white; 
 
    font-size:1.5em; 
 
}

<table id="userArrayTable"> 
 
    <tr id="trHeader"> 
 
    <td id="td">1</td> 
 
    <td id="td">2</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <img src="http://placekitten.com/200/200"/> 
 
     <span>A</span> 
 
    </td> 
 
    <td> 
 
     <img src="http://placekitten.com/200/200"/> 
 
     <span>B</span> 
 
    </td> 
 
    </tr> 
 
    <tr id="tr2"> 
 
    <td> 
 
     <img src="http://placekitten.com/200/200"/> 
 
     <span>Z</span> 
 
    </td> 
 
    <td> 
 
     <img src="http://placekitten.com/200/200"/> 
 
     <span>X</span> 
 
    </td> 
 
    </tr> 
 
</table>