透明颜色必须用rgba()或hsla()，不可用hex或命名色；transparent仅表全透；opacity作用于整个元素并触发新层叠上下文，易致z-index异常。
透明颜色值写法必须用 rgba() 或 hsla()，不能用 hex 或命名色
HTML/CSS 中没有“透明颜色代码”这种独立语法，所谓透明色本质是带 alpha 通道的颜色表示。#00000000（8位hex）虽在部分浏览器支持，但兼容性差且非标准；transparent 是关键字，只能表示完全透明，无法调节透明度。真正可控、通用的做法只有：rgba(0, 0, 0, 0.5) 或 hsla(0, 0%, 0%, 0.5)。
常见错误是试图写 color: #000000; opacity: 0.5; 来实现“半透文字”，结果整个元素及其子元素都变淡——这和只让背景透明是两回事。
-
rgba()最后一位是 alpha 值，范围0（全透明）到1（不透明），支持小数如0.23 - 用
hsla()更适合设计系统中统一调控色相/饱和度+透明度，比如hsla(200, 100%, 50%, 0.3) - 避免对
opacity抱有“只影响背景”的幻想——它作用于整个渲染盒（包括子元素、边框、文字），且会触发新层叠上下文，影响 z-index 行为
position + transparent background 实现局部遮罩或悬浮层
当需要某个定位元素（如弹窗、提示条）显示在内容上方，又不想遮死底层，就得用 position: absolute 或 fixed 配合透明背景。关键点不是“怎么设透明”，而是“怎么不让透明引发意外层叠”。
例如一个居中提示框：
.tip {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7); /* 黑底70%透 */
color: white;
padding: 16px;
border-radius: 4px;
}- 必须显式设置
background-color为rgba()或hsla()，不能依赖父级继承 - 若该元素内含按钮或链接，它们的文字不会自动“变亮”，需单独设
color，否则可能被背景吞掉 - 不要给这个
.tip加opacity：它会让内部文字也变淡，且可能让点击区域响应变弱
z-index 和透明背景共存时的层叠陷阱
透明背景本身不影响层叠顺序，但 opacity 、transform、filter 等属性会隐式创建新的层叠上下文（stacking context），导致 z-index 在其内部重新计算——这是最常被忽略的坑。
典型现象：两个同级 position: relative 元素，A 设了 background: rgba(0,0,0,0.5)，B 设了 z-index: 10，但 B 仍被 A 盖住。原因往往是 A 的父容器用了 opacity: 0.99 或 transform: translateY(0)，悄悄建了新层叠上下文。
- 检查是否无意触发了层叠上下文：用 Chrome DevTools 的 “Layers” 面板看渲染树，或观察
z-index是否突然“失效” - 优先用
rgba()背景而非opacity，可避开 90% 的层叠混乱 - 若必须用
opacity（比如做淡入动画），确保它只加在最外层容器上，并确认其父级没有更早创建层叠上下文
IE 和旧版 Safari 对透明色的支持边界
rgba() 在 IE9+、Safari 5.1+ 支持良好，但 IE8 及更早版本完全不识别，会直接丢弃整条声明（表现为无背景色）。hsla 同理。这不是“透明没生效”，而是“压根没解析”。
如果你仍需兼容 IE8，唯一可行方案是用 PNG 背景图（如 background: url(bg-black-50.png)），或借助滤镜（filter: progid:DXImageTransform.Microsoft.gradient(...)），但后者写法复杂且易出错。
- 现代项目基本可放弃 IE8，但若接手老系统，请先查构建工具是否自动注入了
rgbafallback - PostCSS 插件如
postcss-cssnext（已归档）或postcss-preset-env可将rgba()编译为带 IE 滤镜的兼容写法，但仅限简单场景 - 永远在真实 IE 环境下测试——模拟器不可靠，尤其涉及透明叠加和文字抗锯齿时
透明效果真正难的从来不是“怎么写 0.5”，而是搞清 alpha 属于颜色本身，还是作用于整个盒子；以及何时该用 rgba()，何时动了 opacity 就等于重写了层叠规则。
