利用HTML代码中的picture元素实现黑夜模式图片切换-html教程-PHP中文网

使用配合 prefers-color-scheme 可原生切换昼夜图片：暗色必须置于亮色之前，media="(prefers-color-scheme: dark)" 语法需完整，每个需合法 srcset，且不可省略 fallback。

利用html代码中的picture元素实现黑夜模式图片切换

picture 元素怎么配合 prefers-color-scheme 切换图片

直接用 <picture></picture> 实现黑夜/白天图片切换，核心不是靠 JS 监听主题变化，而是靠 CSS 媒体查询 + source 的 media 属性。浏览器原生支持，无需脚本，也避免闪屏。

关键点：必须把 prefers-color-scheme: dark 写在 <source></source> 的 media 属性里，且顺序很重要——暗色图的 <source></source> 要放在亮色图之前，否则 Safari 会忽略它（这是个已知兼容性坑）。

<source></source> 的 media 值必须是完整媒体查询字符串，例如 media="(prefers-color-scheme: dark)"，不能只写 dark
每个 <source></source> 必须有 srcset（或 src），且格式要合法；空 srcset 或缺失会导致该 source 被跳过
fallback 的 <img> 标签不可省略，它既是降级兜底，也是语义必需节点

为什么不能替代 picture + source

单独改 <img src> 的值（比如用 JS 监听 matchMedia）看似可行，但实际会触发两次加载：先加载亮色图，再加载暗色图，用户可能看到闪烁或延迟。而 <picture></picture> 是声明式加载，浏览器在初始渲染时就根据系统偏好选择唯一匹配的 <source></source>，只发一次请求。

更隐蔽的问题是：如果用户中途切换系统主题（比如从亮变暗），仅靠 <img src> 更新，<img> 的 src 改了但尺寸/宽高比没同步更新，可能导致 layout shift；而 <picture></picture> 的每个 <source></source> 可独立配 sizes 和密度描述符，控制更精细。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

JS 方案需手动监听 matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ...)，还要处理首次加载和切换两轮逻辑
某些 SSR 场景下，服务端无法知道客户端主题偏好，JS 方案必然存在首屏错配风险；<picture></picture> 在客户端解析，天然规避这个问题
部分安卓 WebView（如旧版 Samsung Internet）不支持 prefers-color-scheme 媒体查询，此时 fallback <img> 会生效，属于合理降级

常见错误：图片没切换，控制台也没报错

这种静默失效最常发生在三类地方：路径拼错、media 语法错、或响应式属性冲突。尤其注意 srcset 中的路径是否带前缀（比如用了相对路径但页面在子目录下），以及 media 属性是否被意外覆盖。

检查浏览器开发者工具的 Network 面板：看最终加载的是哪个 srcset 里的 URL，确认该 URL 确实存在且返回 200
在 Elements 面板里右键 <source></source> → “Break on attribute change”，然后切系统主题，看是否触发重选 —— 如果没反应，说明 media 查询没命中
避免在同一个 <picture></picture> 里混用 media 和 type（比如同时切主题和格式），优先级容易混乱；专注单一维度（只切主题）更稳
Safari 15.4+ 才完全支持 prefers-color-scheme 在 <source></source> 中的行为，旧版本会无视 media 直接走 fallback <img>

需要适配高 DPR 屏幕怎么办

单纯切主题还不够，很多用户既开暗色模式又用 Retina 屏。这时得在同一个 <source></source> 里叠加分辨率条件，用 srcset + sizes 组合实现。

例如暗色图既要适配暗色主题，又要为 2x 屏提供高清资源，可以这样写：

<picture><source media="(prefers-color-scheme: dark)" srcset="/img/logo-dark-1x.png, /img/logo-dark-2x.png 2x" sizes="(max-width: 768px) 100vw, 200px"><source media="(prefers-color-scheme: light)" srcset="/img/logo-light-1x.png, /img/logo-light-2x.png 2x" sizes="(max-width: 768px) 100vw, 200px">
  @@##@@
</source></source></picture>