"CSS backdrop 伪元素：模态遮罩的样式与对比度"

概述backdrop 伪元素应用于模态对话与全屏元素的背景遮罩，可设置颜色与模糊效果，改善用户聚焦与可读性。需注意对比度与层级，避免遮挡关键内容。示例dialog::backdrop { background: rgba(0,0,0,0.4) } :-webkit-full-screen::backdrop, :fullscreen::backdrop { background: rgba(0,0,0,0.6) } 工程建议可访问性：确保文字与控件在遮罩下可读；避免过度模糊与暗化。层级：与 `z-index`/`position` 协作；避免自定义遮罩覆盖交互元素。兼容：测试不同平台下的对话与全屏行为；提供回退样式。参考与验证MDN `::backdrop` 文档：https://developer.mozilla.org/docs/Web/CSS/::backdropWHATWG/HTML 对话与全屏相关章节：规范说明