直接用@media (prefers-reduced-transparency: reduce)匹配系统开启“减少透明度”设置，仅支持reduce值，不影响深色模式或动画，主要降级rgba/hsla/transparent背景、box-shadow透明度等，需补阴影和边框维持视觉层级，且Firefox至今不支持。
prefers-reduced-transparency 媒体查询怎么写
直接用 @media (prefers-reduced-transparency: reduce) 就行，它只匹配用户在系统里明确开启“减少透明度”辅助功能的情况。不支持 reduce 以外的值（比如 high 或 on），也不接受布尔简写（@media (prefers-reduced-transparency) 无效）。
常见错误是把它和 prefers-reduced-motion 混用写法，或者误以为能检测“是否启用深色模式”——它只管透明度，不管颜色或动画。
哪些 CSS 属性受 transparent 降级影响最大
真正会被用户感知到“变重了”的，主要是带 alpha 通道的背景和遮罩类属性：
-
background（尤其是rgba()、hsla()或带透明度的十六进制色） -
color和border-color的透明值（但实际中较少用于可访问性降级） -
box-shadow的第四参数（alpha），常被用来营造层次感，降级时建议改用纯黑/灰 + 更强的偏移和模糊 -
opacity不推荐在@media里调整——它作用于整个元素及其子树，容易破坏布局语义；优先改background
Windows/macOS/iOS 上用户怎么开启这个设置
这个媒体查询依赖操作系统原生设置，不是浏览器开关，也不是 JS 可伪造的。用户路径如下：
立即学习“前端免费学习笔记（深入）”；
- Windows 10/11：
设置 > 个性化 > 颜色 > 透明效果（关闭开关） - macOS：
系统设置 > 辅助功能 > 显示 > 减少透明度（勾选） - iOS：
设置 > 辅助功能 > 显示与文字大小 > 减少透明度（开启）
注意：Safari 在 macOS 上对 prefers-reduced-transparency 支持最早（2022 年起），Chrome 直到 119 版本才稳定支持，Firefox 当前（2026 年）仍不支持该特性 —— 所以不能只靠它做核心样式降级，得配合其他策略。
为什么不能只靠 background 替换就完事
单纯把 background: rgba(255,255,255,0.8) 换成 background: #ffffff，往往会让卡片“贴平”页面，失去视觉层级。必须补足替代线索：
- 加
box-shadow（比如0 2px 8px rgba(0,0,0,0.1)）模拟浮起感 - 加细边框（
border: 1px solid #e0e0e0）强化边界识别 - 避免在降级规则里用
!important—— 它会干扰后续主题切换逻辑 - 别忘了测试高对比度模式（
@media (forced-colors: active)）叠加时的表现，两者可能同时生效
最易被忽略的一点：这个查询无法 polyfill，也无法用 JavaScript 检测 fallback；它就是个纯 CSS 媒体特性，意味着你得在设计阶段就为“无透明”状态预留视觉余量，而不是等上线后补救。
