我想创建具有线性渐变背景的 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 中。
通过使用CSS 自定义属性（又名 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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句