通过HTML设置渐变百分比值

Question

我想创建具有线性渐变背景的div容器。它们的百分比颜色值不同。

我有一个工作解决方案，在循环中创建这些div容器时工作

.box {
  width: 500px;
  height: 200px;
}

<!-- The percentage values are just variables! -->
<div style="background-image: linear-gradient(blue 0%, red 20%)" class="box">
</div>

是否可以为渐变创建CSS类，只需按HTML代码设置百分比值？

伪代码

.box {
  width: 500px;
  height: 200px;
}

.gradient{
  /* no colors provided! */
  background-image: linear-gradient(blue, red) 
}

<!-- The percentage values are just variables! -->
<div style="gradientValues: [0%, 20%]" class="box gradient">
</div>

我只需要改变渐变的值，颜色是固定的。但我不想通过JavaScript来实现它，因为我是从ColdFusion代码创建这些div。我不想在没有时执行JavaScript代码。我可以重构渐变颜色并将其放在CSS类而不是写入

style="background-image: linear-gradient(blue VAL1, red VAL2)"

在我的HTML中。

Answer 1

Yes

通过使用CSS Custom Properties（又名CSS变量）

:root {
  --var1: 0;
  --var2: 50%;
}

div {
  height: 100px;
  margin-bottom: 1em;
  background-image: linear-gradient(to right, blue var(--var1), red var(--var2));
}

<div></div>

<div style="--var1:50%; --var2:50%;"></div>