响应式图片在暗黑模式下需协同调整遮罩与发光：明色用黑透明渐变，暗色用白透明渐变；发光色转冷白、半径减小，并用JS监听主题切换，旧版浏览器降级为中性遮罩与webkit兼容写法。
在 H5 页面中，响应式图片遇到移动端暗黑模式时，发光效果（如 filter: drop-shadow）若叠加在浅色遮罩层上，容易出现光晕被“吃掉”、对比度崩塌、文字不可读等问题。关键不是单纯禁用发光，而是让遮罩逻辑适配系统主题，并与发光协同工作。
遮罩层必须区分明/暗模式，不能靠固定 rgba 值硬写
直接写 background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent) 在暗黑模式下会变成“灰黑压灰黑”，失去层次感。正确做法是用 color-scheme: light dark + @media (prefers-color-scheme: dark) 切换遮罩基色：
- 明色模式：渐变起点用
rgba(0,0,0,0.4)，终点透明，压亮图保文字可读 - 暗色模式：起点改用
rgba(255,255,255,0.15)，终点transparent，轻柔提亮底部区域，避免“发灰” - 务必把渐变写在
url()图片之前，且显式分设background-size和background-position，否则响应式缩放时遮罩错位
发光效果需动态降级，而非简单开关
暗黑模式下全关 drop-shadow 会让图片突然“变平”。更自然的处理是：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 保持发光，但将颜色从亮黄/青蓝（
#ffcc00）切换为冷白/浅灰（rgba(255,255,255,0.6)） - 模糊半径适当减小（如从
12px→8px），避免光晕扩散过重干扰暗背景 - 若图片本身含高光细节（如产品图反光），可在暗色模式下加一层
inset box-shadow模拟内边提亮，与外发光形成平衡
图片容器要主动响应系统主题变化
仅靠 CSS 媒体查询无法监听用户中途切换暗黑模式。需补充 JS 监听：
- 用
window.matchMedia('(prefers-color-scheme: dark)')初始化状态 - 绑定
addEventListener('change', handler)，在切换时重新计算遮罩透明度和发光参数 - 对使用
dialog弹出大图的场景，也要同步更新弹窗内<img>的filter和遮罩<div class="overlay">的背景色
兼容性兜底：旧版 Safari 和 Android WebView 需手动 fallback
部分安卓 WebView 和 iOS 15 以下 Safari 不支持 prefers-color-scheme 媒体查询。此时可：
- 检测
navigator.userAgent中是否含WebView或低版本标识 - 默认启用“中性遮罩”：用
linear-gradient(to bottom, hsla(0,0%,0%,0.2), transparent)，不依赖明暗判断 - 发光改用
-webkit-filter: drop-shadow(...)双写，并限制最大模糊值 ≤10px，防卡顿
