我目前在前端有一个十六进制值,我需要使用内联样式使它变亮和变暗。我目前正在尝试像这样使用 css lighten
和 darken
功能,
style={{ backgroundColor: lighten(color, 10 %)}}>
但是jsx不喜欢这样。 还有另一种方法吗?在这个post该人建议使用 scss,但我无法将该值硬编码到 css 中,因为我是从数据库中获取它的。
最佳答案
这不是真正的答案,因为它没有直接解决您的问题或回答您最初的要求。但是...我没有 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/
希望对你有帮助。
关于html - 在 JSX 中使用 css 变亮和变暗功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46287960/