css - 如何用纯 css 覆盖 hsl 亮度

Question

我有一个由标题包裹的导航

<header>
 <nav></nav>
<header>

有了这些款式

header {
    background-color: hsl(180, 90%, 35%);
  }

  nav {
    background-color: hsl(180,80%,25%);
  }

导航颜色是标题颜色，但更暗

我想更改标题颜色但标题颜色不会改变我已经想到了

header {
    background-color: hsl(180, 90%, 35%);
  }

  nav {
    background-color: hsl(inherit,80%,25%); /*Obviusly it doesnt work*/
  }

或者也许使用filter

 nav{
      backdrop-filter: saturate(88,8%)/*cause 88,8% of 90% is 80%*/ lightness(71,4%) /*lightness property doesnt exist*/ ;
 }

我想我可以使用变量，但我想知道是否有办法覆盖或修改亮度（我认为亮度属性不一样）

Answer 1

您可以使用CSS 变量

header {
  --colorAngle: 180;
  background-color: hsl(var(--colorAngle), 90%, 35%);

}

header.other{
  --colorAngle: 95;
}

header nav {
  background-color: hsl(var(--colorAngle), 80%, 25%);
}

<header>
  a
  <nav>b</nav>
  c
</header>
<hr />
<header class="other">
  a
  <nav>b</nav>
  c
</header>