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

Question

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

red例如：如果我选择表格行的颜色，red表格标题将是dark red.

我怎样才能做到这一点？这可能吗？或者我需要为每种颜色设置一个修复条件？

标签： htmlangularjs

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>