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