利用HTML代码中的picture标签根据暗黑模式自动切换背景图-html教程-PHP中文网

标签本身不支持暗黑模式自动切换，仅响应屏幕尺寸和像素密度；实现暗黑/亮色背景图切换应优先使用 css @media (prefers-color-scheme: dark) 配合 background-image，轻量、无 js、兼容性好。

利用html代码中的picture标签根据暗黑模式自动切换背景图

picture 标签本身不支持暗黑模式自动切换

直接用 <picture></picture> 无法根据系统暗黑模式（prefers-color-scheme）自动选图——它只响应屏幕尺寸（media 属性）和像素密度（srcset），不识别颜色方案。想实现暗黑/亮色背景图切换，得靠 CSS 的 @media (prefers-color-scheme: dark) 配合 background-image，或者用 <picture></picture> + JS 监听 matchMedia 手动切换，但后者对「背景图」意义不大（<picture></picture> 是为 <img> 服务的，不是为 CSS 背景设计的）。

用 CSS 媒体查询 + background-image 最简可行

如果目标是让一个容器（比如 <div class="hero">）在暗黑模式下显示不同背景图，CSS 方案最轻量、无 JS、兼容性好（Chrome 87+、Firefox 90+、Safari 14+ 支持 <code>prefers-color-scheme）：

.hero {
  background-image: url('/images/bg-light.jpg');
  background-size: cover;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-image: url('/images/bg-dark.jpg');
  }
}

不需要改 HTML 结构，纯 CSS 控制
两张图会按需加载（浏览器只下载匹配当前 scheme 的那张）
注意：确保路径正确，且服务器允许跨 scheme 加载（一般没问题）
若用 WebP/AVIF 等格式，可叠加 @supports 做渐进增强，但非必需

强行用 picture 实现“类背景图”效果（仅限 img 场景）

如果你必须用语义化 <img>（比如 banner 图需要 SEO、alt 文本、宽高比控制），且希望它随暗黑模式切换，可以用 <picture></picture> 配合 media 查询 prefers-color-scheme：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<picture><source media="(prefers-color-scheme: dark)" srcset="/images/banner-dark.webp" type="image/webp"><source media="(prefers-color-scheme: dark)" srcset="/images/banner-dark.jpg" type="image/jpeg"><source media="(prefers-color-scheme: light)" srcset="/images/banner-light.webp" type="image/webp"><source media="(prefers-color-scheme: light)" srcset="/images/banner-light.jpg" type="image/jpeg">
  @@##@@
</source></source></source></source></picture>

media 属性支持 prefers-color-scheme，现代浏览器已广泛支持
务必把 <source></source> 按优先级从高到低排列（WebP 在前，fallback 到 JPEG）
<img src="/images/banner-light.jpg" alt="Banner description"> 的 src 是最终 fallback，建议设为 light 模式图，避免暗黑模式下无图回退失败
注意：Safari 对 prefers-color-scheme 在 <source></source> 中的支持曾有延迟（iOS 15.4+、macOS 12.3+ 稳定）

JS 监听切换 + 动态替换 background-image（适合运行时重绘）

当需要更复杂逻辑（比如用户手动覆盖系统设置、或背景图需结合其他状态）时，可用 JS 监听并操作 style：

const hero = document.querySelector('.hero');
const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)');

function updateBg() {
  if (darkModeMedia.matches) {
    hero.style.backgroundImage = "url('/images/bg-dark.jpg')";
  } else {
    hero.style.backgroundImage = "url('/images/bg-light.jpg')";
  }
}

darkModeMedia.addEventListener('change', updateBg);
updateBg(); // 初始化