html - 在 JSX 中使用 css 变亮和变暗功能

Question

我目前在前端有一个十六进制值，我需要使用内联样式使它变亮和变暗。我目前正在尝试像这样使用 css lighten 和 darken 功能，

style={{ backgroundColor: lighten(color, 10 %)}}>

但是jsx不喜欢这样。还有另一种方法吗？在这个post该人建议使用 scss，但我无法将该值硬编码到 css 中，因为我是从数据库中获取它的。

Answer 1

这不是真正的答案，因为它没有直接解决您的问题或回答您最初的要求。但是...我没有 50 个代表可以发表评论，我确实认为这可能会有所帮助。

我不相信 CSS 有更亮和更暗的方法。

十六进制是以16为基础的数字，ABCDEF对应11,12,13,14,15,16。例如 AA 为 11*11，FF 为 16*16，0 减 1。

十六进制颜色代码是 3 个数字，例如白色 #FFFFFF(ff,ff,ff) 将是:16*16=256th 数字，或 255(0 是第一个数字)。

颜色越深，数字越大。这意味着……白色是最深的颜色，黑色是最浅的颜色。

获得十六进制颜色值后:

var red = parseInt(hexdecimal[1] + hexdecimal[2],16);
var green = parseInt(hexdecimal[3] + hexdecimal[4],16);
var blue = parseInt(hexdecimal[5] + hexdecimal[6], 16);

然后，如果您想要更亮的颜色值，只需添加颜色值，想要更暗的颜色值则减去颜色值。

这是我刚刚制作的一个快速 fiddle : https://jsfiddle.net/3b57L8ss/

希望对你有帮助。