如何用纯 css 覆盖 hsl 亮度答案

【问题标题】：how to override hsl lightness with pure css如何用纯 css 覆盖 hsl 亮度
【发布时间】：2021-11-16 05:49:21
【问题描述】：

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

<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*/ ;
 }

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

【问题讨论】：

标签： css filter hsl pure-css

【解决方案1】：

您可以使用CSS variable

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>

【讨论】：