dialog::backdrop 样式不生效是因为未调用 showModal()；只有 showModal() 会生成该伪元素，且必须用 background（如 rgba）而非 opacity，旧版 Safari 需手动实现遮罩。
dialog::backdrop 样式不生效？不是 CSS 写错了，而是你根本没调用 showModal()。
为什么 dialog::backdrop 一点反应都没有
浏览器只在调用 dialog.showModal() 时才生成 ::backdrop 这个伪元素；dialog.show()、dialog.open = true 或直接写 <dialog open> 都不会触发它——DevTools 里连这个伪元素都找不到。
- 检查 JS 是否误用了
show()而非showModal() - 确保 DOM 已加载完成再执行
showModal()（比如放在DOMContentLoaded事件里） - CSS 选择器必须是
dialog::backdrop，不能漏掉dialog前缀，也不能写成::backdrop或.my-dialog::backdrop
dialog::backdrop 只能用 background，别碰 opacity
opacity 会把整个 dialog 元素（含文字、按钮）一起变透明，不是遮罩层变淡——这是最常踩的坑。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确做法：用带 alpha 通道的颜色值，比如
background: rgba(0, 0, 0, 0.4) - 简写支持（Chrome 119+/Safari 16.4+）：
background: #0006（#rrggbbaa格式） - 渐变也行：
background: linear-gradient(135deg, #2c3e50, rgba(44, 62, 80, 0.7)) - 想加模糊？
backdrop-filter: blur(2px)必须搭配background（哪怕只是rgba(0,0,0,0.01)），否则部分浏览器直接不渲染
深色/浅色主题下怎么动态改遮罩颜色
dialog::backdrop 不响应 @media (prefers-color-scheme)，得靠 CSS 自定义属性 + JS 控制。
立即学习“前端免费学习笔记（深入）”；
- 先定义变量：
dialog::backdrop { background: var(--backdrop-bg, rgba(0, 0, 0, 0.4)); } - 监听系统主题变化：
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...) - 在
showModal()后加requestAnimationFrame再更新变量，避免因渲染时机导致样式未应用 - 旧版 Safari（≤15.6）或使用
dialog-polyfill时，::backdrop完全无效——这时得手动插入<div class="backdrop">并控制其 class 或 style
真正跨浏览器统一遮罩样式，关键不在怎么写 CSS，而在判断「这个 backdrop 是浏览器画的，还是你代码画的」——后者你才有完全控制权。
