html - 如何动态地使所选颜色变暗

Question

我在 HTML 上为我选择的数据显示了一个表格，表格颜色可以通过我的设置模块动态更改。现在我想让表格标题的颜色比表格行的颜色深。

例如:如果我选择颜色红色，表格行将为红色，表格标题将为深红色。

我该怎么做？这可能吗？或者我需要为每种颜色设置固定条件？

Answer 1

你可以尝试使用透明度

table {
  background-color: red;
  border-collapse: collapse;
}

th {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 8px;
}

<table>
  <tr>
    <th>1 H</th>
    <th>2 H</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>    
   </tr>
   <tr>
    <td>3</td>
    <td>4</td>    
   </tr>
</table>