rgba()和hsla()是设置颜色透明度最常用且可控的方式，均通过第四个alpha参数（0–1小数）实现，区别在于色彩模型不同；兼容性相同（IE9+），而#RRGGBBAA在旧版Safari中不稳，opacity则作用于整个元素及其子内容。
rgba() 和 hsla() 都能设透明度，但浏览器兼容性不同
直接用 rgba() 或 hsla() 是最常用、最可控的透明色写法，两者都支持第四个参数（alpha），取值范围是 0（全透）到 1（不透），支持小数如 0.75。
区别在于：前者基于 RGB 模型，后者基于 HSL 模型。如果你习惯调色盘式操作（比如“把饱和度降一点、明度提一点”），hsla() 更直观；如果习惯数值化控制（比如从 #333 推出灰阶），rgba() 更顺手。
兼容性方面：rgba() 从 IE9 开始支持，hsla() 同样从 IE9 起支持（IE8 及更早版本完全不认这两个函数）。现代项目基本不用考虑降级。
别用 hex + alpha（比如 #RRGGBBAA）在老项目里乱试
#RRGGBBAA 写法虽简洁（如 #00000080 表示半透黑），但它在 Safari 13 之前不支持，在 iOS Safari 13.3 之前也不稳定。Chrome 和 Firefox 支持较早，但团队若需兼容旧版 Safari，这条就容易翻车。
立即学习“前端免费学习笔记（深入）”；
更麻烦的是：它不能被所有 CSS 工具链正确解析——比如某些 PostCSS 插件、CSS-in-JS 库（如 styled-components v5 以下）会报错或静默失效。
稳妥做法是：新项目可酌情用 #RRGGBBAA，但只要项目里还跑着 Safari 12 或更低版本，一律改用 rgba() 或 hsla()。
alpha 参数不是百分比，别写成 50% 或 50
这是高频误写。rgba(0, 0, 0, 50%) 和 rgba(0, 0, 0, 50) 都无效 —— alpha 必须是 0 到 1 的小数。
-
rgba(0, 0, 0, 0.5)✅ 半透黑 -
rgba(255, 0, 0, 0.2)✅ 20% 不透红 -
hsla(120, 100%, 50%, 0.8)✅ 80% 不透绿 -
rgba(0, 0, 0, 50%)❌ 浏览器忽略整条声明 -
rgba(0, 0, 0, 50)❌ 同样被丢弃
opacity 和 rgba/hsla 的透明逻辑完全不同
opacity 是作用于整个元素及其所有子内容的全局透明度，而 rgba() 和 hsla() 只影响当前颜色属性（如 background-color、color、border-color）。
这意味着：
- 用
opacity: 0.5会让文字、图标、子 div 全部变淡，且无法单独恢复某一部分的不透明度 - 用
background-color: rgba(0, 0, 0, 0.5)只让背景半透，文字照常清晰 - 如果父容器用了
opacity，子元素即使设了opacity: 1也无效 —— 透明度会叠加计算
所以：要局部透明（比如蒙层、按钮 hover 背景），优先选 rgba() 或 hsla()；只有真需要整块区域（含文字/图标）统一淡化时，才用 opacity。
/* 推荐：只让背景透，文字保持清晰 */
.card {
background-color: rgba(255, 255, 255, 0.9);
color: #333;
}
<p>/<em> 避免：整张卡片包括文字一起发虚 </em>/
.card-bad {
opacity: 0.9;
background-color: white;
color: #333; /<em> 这行实际效果仍是 0.9 透明度 </em>/
}alpha 值看似简单，但混用 opacity、错写格式、忽略 Safari 兼容边界，三者任一都可能让视觉效果在某个设备上突然崩掉。真正要稳，就盯死一条：颜色级透明用 rgba()/hsla()，数值写小数，浏览器版本查清楚。
