无法根据单色背景切换图片，因其media属性仅支持css媒体查询（如prefers-color-scheme），不支持检测元素background-color；它只响应系统级偏好，与页面内div背景无关。
prefers-color-scheme），而不是页面内某个 div 的 background-color。想靠 <picture></picture> 实现“背景是黑色就切深色图”，纯属误用。
为什么 <picture></picture> 不能读取单色背景？
<picture></picture> 是资源选择器，不是样式监听器。它的 media 属性只支持 CSS 媒体查询语法（如 (prefers-color-scheme: dark)、(min-width: 768px)），**不支持 background-color: #000 这类元素级样式条件**。浏览器根本不会、也不能在渲染时去“检测某个容器的 background-color 并据此选图”。
常见误操作：把 <picture></picture> 塞进带背景的 div 里
很多人写成这样：
<div style="background: #000">
<picture><source media="(prefers-color-scheme: dark)" srcset="icon-dark.png"><source media="(prefers-color-scheme: light)" srcset="icon-light.png">
@@##@@
</source></source></picture>
</div>
这看起来“背景黑 + 暗色图”很配，但实际逻辑完全脱钩：<picture></picture> 切图只看系统主题，跟 div 的背景毫无关系。如果用户系统是亮色模式，哪怕 div 是纯黑，<picture></picture> 仍会加载 icon-light.png —— 可能发灰、对比度崩坏。
真正可行的替代方案
若你真需要“背景色决定图片”，只能放弃 <picture></picture>，改用以下任一方式：
- 用 JavaScript 读取目标元素的 computedStyle，再动态设置
<img src="icon-light.png" alt="icon">—— 但注意：无法预加载、SEO 不友好、首屏可能闪动 - 用 CSS 自定义属性 +
background-image替代：给容器设--img-light: url(...); --img-dark: url(...);，再用background-image: var(--img-dark);配合 class 切换 - 最稳妥做法：把“单色背景”和“对应图片”作为设计约束，在构建时就绑定 —— 比如深色背景区块统一用
data-theme="dark"，然后 JS 或服务端直接输出对应src
记住：<picture></picture> 的使命是响应设备能力与系统偏好，不是页面局部样式。把它当“CSS 背景图开关”用，迟早掉坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
