Question

我有一个html表，其中包含不同颜色的unicode编号，我想做两件事。

将每个单元格的背景设置为unicode符号颜色的反色。
带圆圈的数字大小不一样。如何确保表格中所有符号的大小和对齐方式相同。

这是示例行。

<table>
<tr>
<td align="center;"><mark class="unicode" style="color: #ffbf00; font-size: 15em; font-weight: bold;">①</mark></td>
<td align="center;"><mark class="unicode" style="color: #b5c306; font-size: 15em; font-weight: bold;">②</mark></td>
<td align="center;"><mark class="unicode" style="color: #b87333; font-size: 15em; font-weight: bold;">③</mark></td>
<td align="center;"><mark class="unicode" style="color: #1560bd; font-size: 15em; font-weight: bold;">④</mark></td>
<td align="center;"><mark class="unicode" style="color: #614051; font-size: 15em; font-weight: bold;">⑤</mark></td>
</tr>
</table>

Here是jsfiddle链接。

Answer 1

使用mix-blend-mode时，您可以为背景加上不同的颜色，并使unicode具有相同的颜色，以得到所需的结果。要具有相同的大小，请考虑将monospace与font-family。

您还可以调整padding / line-height来控制空格：

table,
th,
td {
  border: 1px solid black;
}

td {
  padding:0 1.5em 1.5em;
}

mark {
  font-size: 20em;
  font-weight: bold;
  mix-blend-mode: exclusion;
  color: #fff;
  background: transparent;
  font-family: monospace;
  line-height:0.6;
}

<table style="width: 10%;" border="0">
  <tbody>
    <tr>
      <td style="background-color: #ffbf00"><mark class="unicode">①</mark></td>
      <td style="background-color: #b5c306"><mark class="unicode">②</mark></td>
      <td style="background-color: #b87333;"><mark class="unicode">③</mark></td>
      <td style="background-color: #1560bd;"><mark class="unicode">④</mark></td>
      <td style="background-color: #614051"><mark class="unicode">⑤</mark></td>
    </tr>
  </tbody>
</table>

反转HTML表格中每个单元格的背景颜色

1 个答案: