html - 基于渐变色标为许多 css 类定义颜色

标签 html css colors gradient

我有一个渐变色标,我想为其定义一组类。

为了分解它,我有一个可以跨越 08.5 的值,步长为 0.25。我总共有 34 种不同的颜色 (8.5/0.25 = 34),我想在这个渐变色标中跨越它们。因此,我需要定义 34 个不同的类,每个类都根据我在数据库中的值在规模上稍微缩小一点。因此,如果我找到 2.25 的值,我希望在我的渐变范围内获得颜色 29.4% ((2.25 * 100/) 8.5 = 29.4)。我如何使用 css 类来做到这一点?

enter image description here

我这样做的原因是为我放置在 map 上的图标添加颜色。这些值是速度,基于速度我需要在 map 上为我的图标添加一个类,该类包含与速度“值”相匹配的背景(颜色)?

过去 30 分钟我尝试使用谷歌搜索,但我发现自己无法找到任何我可以使用的东西。

如果这看起来很直观,我愿意尝试其他可以帮助我实现所需的解决方案。

如果它有任何重要性,我将使用 MapBox 作为我的 map 解决方案。

最佳答案

尝试使用 SCSS。在 SCSS 中,您可以使用变量和数学。

关于html - 基于渐变色标为许多 css 类定义颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44780354/

相关文章:

html - 如何表示 4 位和 5 位十六进制颜色代码?

javascript - .html() 未注册 ASCII 符号

css - 输入占位符文本被隐藏(所有浏览器)

jQuery 文档完全加载图像、iframe 和 Ajax 的调用

javascript - 如何为这些元素上的 hide() 和 show() 效果添加过渡?

javascript - 短时间内改变颜色 JavaScript 和 CSS

Python matplotlib 颜色函数

使用 Turtle 生成 Python 随机颜色

javascript - Bootstrap Tooltips,如何使用fixed with with alignment?

javascript - 使用 jQuery 在单击时滚动到下一个或上一个 DIV