[CSS] HEX格式color不透明度变换

对16进制的颜色 (HEX格式),基础模式是"#1BFFCD"这种形式(6位16进制数字) - 其R G B分量分别用2位十六进制数字表示(rr gg bb)

HEX格式的颜色也可以设置透明度,在基础的6位16进制数字之后加上2位十六进制数字表示透明度
如"#1BFFCDFF" -> 不透明度最高,其色彩表现等同于 "#1BFFCD"
"#1BFFCD11" -> 不透明度很低,基本等同于背景色
"#1BFFCD00" -> 不透明度最低,等同于背景色

知道了这些,就可以对HEX格式的color进行不透明度变换了
直接贴代码

详解:
1、目标输出格式是统一大写的HEX color,如 "#AABBCCEF"。
不想要"#aabbccef",更要避免 "#AABBCCef"这种大小写混合的情况。
因此在代码中对用户输入的hex color及转化后的透明度都进行了toUpperCase处理。

2、此外还有一个需要注意的点在于
当传入的参数percent比较小,如0.01 或 0.05。
对应的直接计算出的opacity分别是 0.01 -> "2" 0.05 -> "C"
如果不对opacity进行处理,则会产生
"#AABBCC2"
"#AABBCCC"
这样的7位HEX color 这种color是违规的,会造成不可预期的结果。
因此判断opacity的length,如果length小于2则补零,将opacity变成2位。

完结。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/vto22bxk1b4p6cte

作者:DiracKeeko原文地址:https://segmentfault.com/a/1190000043633202

%s 个评论

要回复文章请先登录注册