rgba()文字半透明无效，主因是父容器背景非透明导致无法呈现穿透效果；text-shadow需单独用rgba设置阴影透明度；IE8以下需前置fallback色；alpha降低会削弱对比度，影响可访问性。
rgba() 给文字设半透明颜色，为什么写了没反应？
直接写 color: rgba(0, 0, 0, 0.5); 却看不到半透明效果，大概率不是语法错，而是被父容器或祖先元素的背景“吃掉”了不透明度。RGBA 本身只控制当前元素文字的 alpha 通道，它不会让文字“透出背后内容”，而是和当前元素的背景色做混合——如果父级背景是纯白且没设 background-color（即默认透明），那文字其实是叠在白色画布上的，你看到的就是灰字，不是“半透”。
- 检查父容器是否有显式
background-color，比如body { background: white; }，此时rgba(0,0,0,0.5)就只是中灰色，不是“透” - 想看到真正穿透效果，得让文字所在元素的背景是透明的，且下层有可识别内容（比如带图的
section或设置了background-image的容器） - 注意：
rgba()中的 alpha 值范围是0（全透）到1（不透），别写成50或50%，那是错的
text-shadow 配合 rgba() 能让文字“浮起来”吗？
可以，但不是靠 rgba() 控制阴影透明度，而是用 text-shadow 自己的 color 部分支持 rgba。常见误区是以为给文字设了 rgba() 就自动带阴影，其实两者完全独立。
-
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);才是带半透阴影；只写text-shadow: 2px 2px 4px #000;阴影是实心黑 - 阴影的 alpha 和文字颜色的 alpha 不联动，可以一个高一个低，比如浅色字 + 深而淡的阴影来增强可读性
- 多层阴影叠加时，每层都得单独写 rgba，例如：
text-shadow: 0 0 2px rgba(255,255,255,0.8), 0 0 4px rgba(0,0,0,0.2);
IE8 及更老浏览器不支持 rgba()，怎么兜底？
IE8 及以下完全不认 rgba()，遇到就直接忽略整条 color 声明，退回到继承色或浏览器默认色，结果常是黑字糊成一片。不能只靠“加个 fallback 颜色”就完事。
- 必须把不透明 fallback 放在
rgba()前面，CSS 会按顺序覆盖：color: #000; color: rgba(0,0,0,0.7); - 别用
filter: alpha(opacity=70)给文字降不透明——它作用于整个元素（含背景、边框），还会触发 IE 的 hasLayout bug，导致布局错乱 - 真要兼容老 IE，更稳妥的是用半透 PNG 作为文字背景图，或改用
opacity（但它是整元素透明，副作用大）
用 rgba() 写文字颜色，会影响可访问性吗？
会，而且很容易踩坑。WCAG 要求文字与背景对比度至少 4.5:1（普通文本），而 rgba() 降低 alpha 后，对比度会直线下降，尤其在浅背景上。
立即学习“前端免费学习笔记（深入）”；
- 例如
rgba(0,0,0,0.5)在#fff背景上，实际等效灰度约#808080，对比度只有 ~2.5:1，屏幕阅读器可能无视，视力弱用户根本看不清 - 别依赖“看着还行”做判断，用浏览器插件（如 axe DevTools）或在线工具（WebAIM Contrast Checker）实测对比度
- 若设计强制要求淡色文字，优先降亮度（比如用
hsl(0,0%,40%)）而非降 alpha；实在要用 rgba，确保背景够深，或加文字描边/阴影提升可读性
