rgba()和hsla()是精准控制颜色透明度的首选，只影响指定颜色属性而不改变元素内容透明度；opacity作用于整个元素及其后代，会触发新层叠上下文；transparent是完全透明的颜色关键字，仅用于颜色属性。
rgba() 和 hsla()：精准控制颜色透明度的首选
想让背景半透但文字清晰？用 rgba() 或 hsla()。它们不是“让元素变透明”，而是“让某个颜色带透明通道”——只影响你写的那条属性，比如 background-color、border-color 或 color。
-
rgba(255, 0, 0, 0.4)：红 255、绿 0、蓝 0、透明度 0.4 → 半透明红色背景，文字照常不透明 -
hsla(200, 100%, 50%, 0.3)：色相 200（青蓝）、饱和度满、亮度中等、透明度 0.3 → 更直观调色，适合设计系统 - Alpha 值范围是
0（完全透明）到1（完全不透明），支持小数，如0.05、0.87 - 不触发新层叠上下文，不影响
z-index行为，布局更可预测
opacity：整块元素一起“罩玻璃”，慎用
opacity 不是颜色，而是一个作用于整个元素及其所有后代的开关。设成 0.6，等于给这个 dom 节点和它里面所有文字、图片、按钮、子容器统统盖上一层 40% 透光率的玻璃。
- 子元素无法“取消继承”父级的
opacity—— 即使你给子元素写opacity: 1也无效 - 会强制创建新的层叠上下文，可能意外改变
z-index层级关系，导致遮挡或浮层错位 - 设为
0的元素仍占据文档流空间，只是看不见；不能替代display: none - 适合场景：淡入动画、禁用态遮罩层、全局水印
transparent 关键字：完全透明的“空色值”
transparent 是 css 预定义的颜色关键字，等价于 rgba(0, 0, 0, 0)，表示“这里什么颜色都没有”。它不带数值，也不接受透明度参数。
- 只能用于接受颜色值的属性，如
background-color、border-color、outline-color - 不能用于
opacity（opacity: transparent是非法语法） - 常见用途：清空默认背景（如按钮）、配合伪元素做透明蒙版、初始化状态样式
- 注意：
background: transparent和background: none效果不同 —— 后者还会清除背景图，前者只清颜色
为什么 background-color: rgba(…) 比 opacity: 0.5 更常用？
因为绝大多数 ui 场景要的是“背景透、内容不透”：导航栏悬浮、卡片浮层、输入框聚焦态、模态框 backdrop —— 这些都依赖背景可透而文字/图标必须锐利可读。
立即学习“前端免费学习笔记（深入）”；
- 用
opacity实现这类效果，你得把内容抽出来单独包裹一层，再用定位强行叠上去，结构臃肿且易出错 - 用
rgba()一行代码搞定：background-color: rgba(255, 255, 255, 0.15) - 兼容性足够好：所有现代浏览器（包括 edge 12+、safari 5.1+、chrome 4+）都支持
rgba()，无需降级处理 - 如果真要兼容 IE8 及以下（已极罕见），才需考虑
Filter: alpha(opacity=50)，但这是历史包袱，现在基本可忽略
.card { background-color: rgba(255, 255, 255, 0.15); /* 轻透白底，文字全清晰 */ backdrop-filter: blur(4px); /* 可选：加毛玻璃效果 */ color: #333; } .card-fallback { background-color: transparent; / IE8 兜底 / filter: alpha(opacity=15); / 仅 IE8 生效 / }
真正容易被忽略的，是把 opacity 当成“背景透明快捷键”来用 —— 它确实快，但代价是整个内容树跟着发虚。多数时候，你要的不是“淡”，而是“透”。