应使用rgba()替代十六进制实现透明背景，因其仅作用于颜色本身、不影响子元素；#rrggbbaa兼容性差，需fallback；alpha必须为0–1小数，十六进制须先转rgb再加alpha。
直接用 rgba() 替换十六进制，别改原值再套壳
CSS 本身不支持在 #ff6b6b 后面加个透明度参数。你不能写 color: #ff6b6b80（虽然 8 位 hex 在部分现代浏览器中能解析，但兼容性差、语义错乱、设计师给的稿子也几乎从不这么写）。真正可靠的做法，是把十六进制转成 rgba() 字符串再塞进 CSS 属性里。
常见错误是：拿到 #ff6b6b，手动算出 rgb(255,107,107)，再拼成 rgba(255,107,107,0.3) —— 这没问题，但每次都要算就太慢；更糟的是有人写错 slice 起始位置，比如用 hex.slice(1,2) 取红，结果只取到一位，parseInt('f', 16) 得 15，颜色全偏灰。
-
hex.slice(1,3)才是对的红通道（跳过 #，取两位） - 必须先去掉
#，再判断长度：3 位要双写（#f00 → ff0000），6 位才可直接切分 - 透明度传
0.3，不是30或30%——rgba()第四个参数是小数，范围 0–1
hexToRgba() 函数里最容易漏掉的校验点
很多现成代码示例直接信任输入，但线上环境里你可能收到空字符串、null、带空格的 " #fff "，甚至 "rgb(255,0,0)" 这种非法值。不加防护，函数一执行就报 NaN，后续 rgba(NaN, NaN, NaN, 0.3) 在 CSS 里直接失效。
- 开头必须
hex = String(hex).trim().replace(/^#/, '')，强转字符串 + 去空格 + 去 #，避免undefined.replace报错 - 3 位简写扩展后，长度必须为 6；否则说明输入无效，该抛错或 fallback，而不是硬塞进
parseInt -
parseInt(h.slice(4,6), 16)如果h不足 6 位，会返回NaN—— 所以扩展步骤不能省，也不能只靠length === 3判断，还要容错大小写和非法字符
8 位十六进制（如 #ff6b6bff）不是标准方案，慎用
Chrome/Firefox 支持 8 位 hex（#RRGGBBAA），比如 #ff6b6b4d 表示 30% 透明（0x4d ≈ 77/255 ≈ 0.3）。但它的问题很实际：
- CSS 预处理器（Sass/Less）大多不识别，编译时报错
- PostCSS 插件、CSS-in-JS 库（如 styled-components）可能无法正确解析或压缩
- 设计师工具（Figma/Sketch）导出颜色时默认不带 alpha，你得手动补两位，容易出错
- IE 完全不支持，哪怕只是“渐进增强”场景，也得考虑兜底
所以除非项目明确要求纯 CSS 方案且已放弃旧浏览器，否则优先走 JS 转 rgba()，再注入样式或内联 style —— 控制力更强，调试路径更直。
透明度 30% 对应的 alpha 值不是固定 0.3，要看设计系统定义
这里有个隐藏陷阱：0.3 是线性 alpha 值，但人眼对亮度变化是非线性的。有些设计系统定义“30% 透明”其实是基于背景混合后的视觉感知，比如在白色背景上叠加一层 rgba(255,107,107,0.3)，实际看到的灰度未必符合预期。
更关键的是：如果你用这个 rgba 值去做颜色计算（比如生成禁用态、悬停态），直接乘 0.3 会失真。例如深色主题下，同一 alpha 值可能导致文字可读性崩塌。
所以别把 0.3 当魔法数字硬编码。建议封装时把 alpha 作为参数传入，同时配套提供语义化别名：
-
hexToRgba('#ff6b6b', 'medium')→ 内部映射到 0.3 -
hexToRgba('#ff6b6b', 'disabled')→ 映射到 0.12 - 这样既保灵活性，又防团队成员各自理解“30%”
真正难的从来不是怎么转，而是转完之后，那个 alpha 值在不同上下文里是否还成立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
