HTML中无透明颜色代码，实现半透侧边栏需用rgba()设置alpha通道（0~1），推荐0.7~0.9；兼容IE8需先写hex再覆盖rgba()；追求毛玻璃效果须叠加backdrop-filter: blur()并加浏览器前缀。
HTML 中没有“透明颜色代码”这种东西——transparent 是唯一合法的透明关键字，但直接写在 background-color 里往往达不到你想要的“半透侧边栏”效果，因为真正起作用的是 alpha 通道控制。
用 rgba() 设置带透明度的侧边栏背景
想让侧边栏背景是“灰中带透”，不能只靠 transparent（它等价于 rgba(0,0,0,0)，完全看不见），而要用 rgba() 显式指定红绿蓝和 alpha 值：
-
rgba(255, 255, 255, 0.8)：白色背景，20% 透明（即 80% 不透明） -
rgba(0, 0, 0, 0.1)：黑色背景，90% 透明（几乎看不见，慎用） - alpha 值范围是
0（全透明）到1（不透明），推荐从0.7~0.9开始试 - 注意：IE8 及更早版本不支持
rgba()，如需兼容，得加 fallback（见下一条）
兼容老浏览器：先写 hex 或 rgb()，再覆盖 rgba()
CSS 解析是顺序覆盖的，把兼容性好的写在前面，新特性写在后面，老浏览器会忽略不认识的 rgba()：
aside.sidebar {
background-color: #ffffff; /* IE8 及以下 fallback */
background-color: rgba(255, 255, 255, 0.85);
}- 不要写成
background-color: #fff; background-color: rgba(...);，因为#fff和#ffffff等价，但某些旧版 IE 对简写 hex 的解析有偏差，建议统一用六位 - 如果用了 CSS 预处理器（如 Sass），可用
fade-out($color, $amount)自动转rgba()
别漏掉 backdrop-filter：让侧边栏“毛玻璃”而不是“磨砂纸”
仅靠 rgba() 是“背景透出”，内容仍清晰；要实现 macOS 风格的模糊透出，得加 backdrop-filter：
立即学习“前端免费学习笔记（深入）”；
aside.sidebar {
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* Safari 必须加前缀 */
}-
backdrop-filter目前在 Chrome 76+、Firefox 103+、Safari 15.4+ 支持，Edge 全支持；IE 完全不支持 - 模糊值太大会明显拖慢滚动性能，
4px~12px是较稳妥区间 - 若侧边栏有子元素（如按钮、文字），它们默认也会被模糊，需对子元素设
backdrop-filter: none单独关闭
真正难的不是写哪行代码，而是判断该用 rgba() 还是 backdrop-filter，或者两者叠加；alpha 值调高了像没透，调低了看不清内容，blur 值加了又怕卡——这些都得在真实设备上滚几遍才拿捏得住。
