HEX透明度（#RRGGBBAA）不可动态修改，仅是颜色值的硬编码部分；真正推荐的是现代rgb(0 0 0 / 0.3)语法，兼容Chrome93+/Firefox93+/Safari15.4+，支持CSS变量与百分比，fallback明确且可设计系统化。
HEX透明度（#RRGGBBAA）不能直接“修改”，它只是颜色值的一部分
你没法像改opacity那样动态调整#FF634799里的99——它不是独立属性，而是硬编码进颜色值里的。所谓“更好”，其实是误读了使用场景：当你只需要让背景色变半透，而文字、边框、子元素必须保持 100% 清晰时，#RRGGBBAA 或 rgb(255 99 71 / 0.6) 这类带 alpha 的颜色写法，比给整个容器加 opacity: 0.6 更精准。
为什么用 #RRGGBBAA 容易出错
看似简洁，但实际踩坑率很高：
-
#RRGGBBAA在 IE11 及更早版本、部分 Android WebView（尤其是 Android 6–8 系统自带浏览器）中被完全忽略，回退成不透明黑#000000或白#FFFFFF - VS Code 默认 CSS 插件不识别
#00000080，常标红；某些构建工具（如旧版 cssnano）会直接删掉后两位 - 透明度值
AA是十六进制，00= 0%，FF= 100%，中间换算不直观：比如 30% 透明度要写4D，不是30 - 无法用 CSS transition 单独动画
AA部分——你只能整个颜色跳变，不能平滑过渡
真正推荐的“背景透明”写法是 rgb() 函数语法
现代标准（CSS Color Level 4）中，rgb(0 0 0 / 0.3) 比 #0000004D 更可靠，也比 rgba(0, 0, 0, 0.3) 更简洁：
- 支持所有 Chrome 93+、Firefox 93+、Safari 15.4+，且 fallback 行为明确（不支持时降级为
rgb(0 0 0)，即不透明黑） - alpha 值直接写小数或百分比：
rgb(0 0 0 / 30%)合法，语义清晰 - 可配合 CSS 自定义属性使用：
--bg: rgb(0 0 0 / var(--alpha, 0.2)); - 和
hsl(0 0% 0% / 0.2)、lab(0 0 0 / 0.2)一样，属于“可设计系统化”的颜色表达方式
opacity 该用的时候还是得用
别为了“避免 opacity”而强行绕路。以下情况必须用 opacity：
立即学习“前端免费学习笔记（深入）”；
- 需要整块区域（含文字、图标、阴影）同步淡入淡出做交互动画
- 目标浏览器明确包含 IE9–11（此时
rgba()是唯一稳定选择，#RRGGBBAA和新式rgb()都不可用） - 实现视觉上的“禁用态”（
opacity: 0.4; pointer-events: none;），这时子元素本就不该交互
关键不是“哪个更好”，而是你控制的到底是颜色，还是渲染层——前者用带 alpha 的颜色函数，后者才轮到 opacity。混淆这两层，是绝大多数透明度 bug 的根源。
