相对复杂的表单元格-解网

问：

我有一个表，其第 n 列需要包含一些相互分层的元素。主图像将作为始终可见的背景，其下半部分将包含一系列 5 个元素，这些元素均匀分布在图像下方的文本内容中，可以设置为可见或不可见。

.bingo-container {
  position: relative;
  top: 0;
  left: 0;
}

#card {
  position: relative;
  left: 0;
  top:0;
}

.star {
  position: absolute;
  top: 50px;
}

#s1 {
  left:0;
}

#s2 {
  left: 50px;
}

#s3 {
  left: 100px;
}

#s4 {
  left: 150px;
}

#s5 {
  left: 200px;
}

.spot-txt {
  position: absolute;
}

<td class="bingo-container"><img src="/bingo-assets/card.svg" width="250" id="card"> 
    <div id="s1" class="spot-txt">
        <img src="/bingo-assets/star.svg" width="50" class="star"/>
        <div>22</div>
    </div>
    <div id="s2" class="spot-txt">
        <img src="/bingo-assets/star.svg" width="50" class="star"/>
        <div>53</div>
    </div>
    <div id="s3" class="spot-txt">
        <img src="/bingo-assets/star.svg" width="50" class="star"/>
        <div>C*</div>
    </div>
    <div id="s4" class="spot-txt">
        <img src="/bingo-assets/star.svg" width="50" class="star"/>
        <div>02</div>
    </div>
    <div id="s5" class="spot-txt">
        <img src="/bingo-assets/star.svg" width="50" class="star"/>
        <div>G*</div>
    </div>
</td>

“星星”必须是我可以消失的图像，它们直接位于文本的中心，该文本位于其小正方形中，该正方形是较大背景图像宽度的 1/5。

返回页首	之	这	伊玛	通用电气
1	2	3	4	5

我如何让上面的整个框包含大图像，而放置小图像下方的小文本则以 1-5 的形式布局？我已经附上了我目前拥有的东西。这都是古怪的方式。另一个注意事项是，此页面中的所有元素都已设置为 text-align： center;因此，默认情况下，图像希望在其单元格的中途开始。

CSS HTML 表格

相对复杂的表单元格

Relatively complex table cell

评论