关于css:CSS-HEX格式color不透明度变换

5次阅读

共计 642 个字符,预计需要花费 2 分钟才能阅读完成。

对 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

正文完
 0