Question

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

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

提前致谢。

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

我在photoshop中创建了一个高100像素，宽1像素的图像。每个像素代表其百分比的颜色。因此，像素0为1％，像素99为100％。然后，我将图像垂直拉伸至少进度条的高度。如果它是20px高，我将图像拉伸至少20倍。拉伸需要使用最近邻算法来完成，以防止应该没有的渐变;每个像素只需要垂直拉伸20倍，因此每20个像素就会出现锐边。

我生成的图像用作仅水平重复的背景图像。使用图像位置，我设置背景位置：0 - [（百分比-1）* 20] px和宽度：[百分比]％。（方括号中的部分使用PHP或JavaScript或其他方式计算）。这就是它。每当百分比发生变化时，我只需要更改这两个值，并且背景会自动适应，无论其颜色如何。

Answer 1

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

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

.progress {
    background-color: blue;
}

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

CSS背景颜色有很多（20个以上）步骤

1 个答案: