rgba()的alpha值必须是0–1小数而非百分比或整数；仅透明背景用rgba()，整体透明用opacity；ie8需前置fallback色值；backdrop-filter生效需背后有真实内容。
rgba() 里 alpha 值不是百分比，是 0–1 的小数
很多人写 rgba(0, 0, 0, 50%) 或 rgba(0, 0, 0, 50)，结果背景不透明——浏览器直接忽略整条声明。CSS 的 rgba() 第四个参数必须是 0 到 1 之间的小数，0.5 才等于 50% 透明度。
常见错误现象：background-color: rgba(255, 255, 255, 100) 看似“100% 不透明”，实际无效；rgba(0, 0, 0, 0.0) 是完全透明，rgba(0, 0, 0, 1.0) 是完全不透明。
- alpha =
0.0：背景彻底消失（但元素仍占位） - alpha =
0.8：适合蒙层，文字可读又压得住底图 - alpha =
0.1：极淡遮罩，常用于 subtle hover 效果
透明背景和 opacity 的关键区别在哪
opacity 会让整个元素（包括子内容、边框、阴影）一起变透明；而 rgba() 只作用于当前颜色属性（比如 background-color），文字、子元素保持原样。
使用场景：做卡片浮层时，用 background-color: rgba(255, 255, 255, 0.9) 能让背景微透、文字清晰；若误用 opacity: 0.9，标题和按钮也会发虚，可读性下降。
- 要仅透明背景 → 用
background-color: rgba(...) - 要整体渐隐（如淡入动画）→ 才考虑
opacity -
opacity会触发新层叠上下文，可能影响 z-index 行为
IE8 及更老浏览器不支持 rgba()，fallback 怎么写
IE8 及以下连 rgba() 解析都失败，会直接丢弃该声明。必须提供降级色值，且 fallback 要写在 rgba() 前面，靠 CSS 层叠覆盖。
错误写法：background-color: rgba(0, 0, 0, 0.5); background-color: #000; —— IE8 会用 #000，但现代浏览器也用了它，rgba() 白写了。
- 正确顺序：
background-color: #000; background-color: rgba(0, 0, 0, 0.5); - 也可以用 IE 专属滤镜（已淘汰，仅作了解）：
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000); - 现在多数项目已放弃 IE8 支持，但若需兼容，务必验证 fallback 是否生效
透明背景遇上 backdrop-filter，模糊效果为啥没反应
backdrop-filter: blur(4px) 需要「背后有内容可模糊」，如果父容器或祖先节点用了 rgba() 透明背景，但自身没有设置 background-color（即默认透明），那模糊就无从谈起——背后是空白或 body 背景。
常见错误：给弹窗加 background-color: rgba(255, 255, 255, 0.8) 和 backdrop-filter: blur(6px)，结果模糊无效。因为弹窗本身挡住了背后的页面内容，blur 没东西可处理。
- 确保弹窗的父容器（或 body）有真实内容（如图片、文字、色块）
- 避免在
body上设纯色背景，否则backdrop-filter模糊的是那个纯色，看不出效果 -
backdrop-filter在 Safari 和 Chrome 较新版本支持良好，Firefox 默认禁用，需手动开启layout.css.backdrop-filter.enabled
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
