带有许多（超过 20 个）步骤的 CSS 背景颜色

Question

我需要我的对象根据某个值具有不同的背景颜色。特别是，它是一个百分比条，理论上有 100 种不同的背景颜色（当它为空时忽略不存在的颜色）。自然，条的宽度从 1% 到 100% 不等。我想知道，我怎样才能自动制作所有不同的色调？

我的基本想法是：如果我有一个 100 像素宽的图像，每个像素都有不同的颜色，我会尝试将背景宽度限制为 1 个像素，使用正确的偏移量，然后重复它。这样，它就是一个 CSS 属性，即偏移量，需要通过 JavaScript 进行更改，并且不需要在 100 个不同的类之间切换。遗憾的是，背景大小、背景位置和背景重复不是这样工作的。所以我的问题是：我有什么可能让它变得简单并且依赖于不超过 3 个线性依赖于百分比的数字 CSS 属性？

提前致谢。

编辑：我有一个想法，我尝试过，它有效。

我在 Photoshop 中创建了一个正好 100 像素高和 1 像素宽的图像。每个像素代表其百分比的颜色。因此，像素 0 表示 1%，像素 99 表示 100%。然后，我将该图像垂直拉伸至少进度条的高度。如果它是 20px 高，我将图像至少拉伸 20 倍。拉伸需要使用最近邻算法来完成，以防止在不应该有梯度的地方出现梯度；每个像素只需要垂直拉伸 20 倍，因此每 20 个像素就会出现锐利的边缘。

我将生成的图像用作仅水平重复的背景图像。使用图像位置，我设置了 background-position: 0 -[(percentage-1)*20]px 和 width: [percentage]%。 （方括号中的部分是使用 PHP 或 JavaScript 或其他方式计算的）。差不多就是这样。每当百分比变化时，我只需要更改这两个值，背景就会自动适应，而不管其颜色如何。

Answer 1

您的颜色需要有多大不同？理论上，您可以根据不透明度或背景色指定的 alpha 值拥有 100 种不同的颜色。然后，您可以使用 html5 数据属性更改 alpha 以匹配条形的百分比。说你做了这样的事情：

<div class="progress" data-percentage="<?php echo $percentage; ?>"></div>

.progress {
    background-color: blue;
}

jquery:
$function() {
 $('.progress').css('opacity', $(this).data('percentage'));
}