有没有使用一种颜色设置线性渐变的解决方案

Question

在我的项目中，用户可以 select 为他们的个人资料页面添加强调色 (var(--color-main))。是否有可能仅使用该主色创建渐变背景，例如通过使用主色 + 应用于此颜色的 % 使其更暗（或更亮）并将其用作第二种颜色来制作渐变。这可能吗？

.TabsHeader-module--wrapper--BMiDm .TabsHeader-module--bgBlock--qXkLH {
background-color: var(--color-main);
border-radius: 0 0 20rem 0;
height: 21.6rem;
position: absolute;
top: 0;
width: 100%;
}

Answer 1

这是一个定义了两个自定义属性的示例：

--color是你的主色
--alpha 是应用到 --color 的不透明度配额 (0-1) 以获得第二个渐变颜色

background-image 样式属性使用从 --color 到 --color(alpha)

的渐变阴影设置

rgba 可以定义颜色 MDN

:root {
  --color: 240, 0, 0;
  --alpha: .5;
}

.gradient{

  background-image:
    linear-gradient(
      to right,
      rgba(var(--color), 1),
      rgba(var(--color), var(--alpha))
    );

  width: 100%;
  height: 200px;
  text-align: center;
}

<div class="gradient"></div>

Answer 2

我发现只有当您将值指定为 RGB 小数时，您才可以使用可变颜色和不透明度控制，这是 3 个数字（例如 240、240、240）。稍后你可以给它一个第四个值，它将控制颜色的不透明度（即使它更暗或更亮）。这是一个例子：

:root {
 --color: 190,190,190;
}

div {
  background: linear-gradient(to right, rgba(var(--color), 0.8), rgba(var(--color), 0.3));
}

感谢来自 codegrepper.com

的 Thankful Teira

有没有使用一种颜色设置线性渐变的解决方案

Is there a solution to set a linear gradient using one color

css

sass