css - 我们可以参数化 CSS 样式吗？

Question

由于这段 CSS 代码，我显示了一个干净的百分比背景:

.percent {
   background: linear-gradient(to left,  #FFBFBF 10%, #9BF7BF 10%) no-repeat;
   background-position-y: 45%;
   background-size: 100% 21px;
}

我的问题是:我能以某种方式对 HTML 中的百分比(此处为 10%)进行参数化吗？理想情况下，它看起来像 <td class="percent(10)">

我能想到的唯一解决方案是生成 100 .percent CSS 样式并从 HTML 中调用正确的样式，例如 <td class="percent10">或 <td class="percent87">但这很难看，不是吗？

现在渲染看起来像这样:

Answer 1

如何从概念上解决这个问题的简单方法:

<div style="position: relative; background: #FFBFBF; width: 200px; height: 25px;">
    <div style="position: absolute; top: 0; left: 0; background: #9BF7BF; width: 87%; height: 100%;"></div>
    <div style="position: absolute; top: 0; left: 0;">87%</div>
</div>

“背景”div(最外面的那个)是粉红色的；在此之上放置一个绿色的 div，其 width 可以改变，并在其之上将百分比写为文本。