HTML中无透明颜色代码，透明效果须通过CSS实现；推荐用rgba()控制背景透明度，避免opacity影响子元素，8位十六进制色值需谨慎并配降级方案。
HTML里没有“透明颜色代码”，只有透明度控制方式
HTML本身不定义颜色的透明度，color 或 background-color 的透明效果必须通过 CSS 实现。所谓“透明颜色代码”，实际是用 rgba()、hsla() 或 opacity 这三类手段之一达成的视觉效果。直接写 #00000000（8位十六进制）在现代浏览器虽能生效，但兼容性差且语义模糊——它依赖 CSS Color Module Level 4，IE 完全不支持，旧版 Safari 也容易出错。
用 rgba() 给卡片背景加透明度最可控
rgba() 允许你单独控制背景色的透明度，不影响子元素（文字、按钮等）的可见性，是卡片式布局中最推荐的方式。
-
rgba(255, 255, 255, 0.8)表示白色背景，80% 不透明（即 20% 透明） -
rgba(0, 0, 0, 0.1)常用于深色主题下的浅黑蒙层，透出底图但不压暗文字 - 避免写成
rgba(0, 0, 0, 0)—— 虽然合法，但等于完全透明，可能让卡片“消失”，调试时难定位 - 注意：不要混用
rgba()和opacity，否则会叠加导致意外过透
.card {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 8px;
padding: 16px;
}
opacity 会让整个卡片（含文字、图标）一起变透明
如果你发现卡片里的文字也发虚、看不清，大概率是误用了 opacity。它作用于整个元素及其所有后代，无法单独保留内容可读性。
-
opacity: 0.7→ 卡片容器 + 文字 + 图标 + 边框 全部按 70% 不透明渲染 - 值范围是
0（全透）到1（不透），不能写成百分比如70% - 和
rgba()相比，opacity在某些低性能设备上可能触发额外合成层，轻微影响滚动流畅度
8位十六进制色值（如 #ffffff80）要谨慎用
这种写法是 CSS Color Level 4 新增特性，把 alpha 通道塞进十六进制颜色末尾两位。虽然简洁，但落地风险明显：
立即学习“前端免费学习笔记（深入）”；
- Chrome 62+ / Firefox 49+ / Edge 79+ 支持；Safari 12+ 才开始支持，iOS 12.2 以前的 Safari 会直接忽略整条声明
- 写成
#fff8（简写）时，浏览器解析行为不一致：Chrome 当作#ffff8888，Firefox 可能报错或回退为不透明 - 构建工具（如 PostCSS）默认不处理这类值，若未配置插件，可能被直接剔除
.card-fallback {
background-color: #ffffff; /* 降级色 */
background-color: #ffffff80; /* 支持时覆盖 */
}真正要让卡片“看起来透明又保持可用”，核心就一条：优先用 rgba() 控制背景，避开 opacity 对内容的连带影响，8位 hex 仅作为渐进增强手段，且必须配好降级。别指望一个“颜色代码”解决所有透明问题——透明是分层的事，不是一锤子买卖。
