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

Question

我在HTML上展示了一张表格，根据我的设置模块，该表格的颜色可以动态更改。现在我想让表头比表格行更暗一些。

例如：如果我选择了红色，表格行将会是红色的，而表头将是深红色的。

如何做到这一点？这可能吗？还是我需要为每种颜色设置一个固定的条件？

- Richard

---

你使用的 Angular 版本是哪个？ - solimanware

@Microsmsm 我正在使用 AngularJS v1.6.9。 - Richard

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>

- Jack

Answer 2

您可以使用SASS的darken函数。

这里是一个例子。

$linkcolour: red;

table {
  background-color: $linkcolour;
}
thead{
  background-color: darken($linkcolour, 30%);
}

- Maarti