加深 CSS 变量中指定的颜色

Question

我需要加深 CSS 变量中指定的颜色。

我有这个 CSS 代码：

background:linear-gradient(to right, 
                           var(--mainContainer-background) 80%,
                           @gray-light 100%);

CSS 变量 --mainContainer-background 可以由用户使用一些 JS 即时更改，但我想在我的背景渐变中设置这种颜色的变暗变化，例如，我希望该渐变从比 --mainContainer-background 中存储的颜色深 20% 的颜色开始。

在某种程度上可能吗？

Answer 1

您可以考虑使用上面的另一种透明黑色渐变：

.box {
  min-height:50px;
  margin:20px;
  background: 
   linear-gradient(to right,rgba(0,0,0,0.6),transparent 80%),
   linear-gradient(to right, var(--color,blue) 80%, grey 100%);
}

<div class="box" style="--color:red;">
</div>
<div class="box" style="--color:pink;">
</div>
<div class="box" >
</div>

加深 CSS 变量中指定的颜色

Darken a color specified in a CSS variable

css

linear-gradients

css-variables