light-dark()函数目前不是标准CSS函数，浏览器原生不支持；可靠方案是使用@media (prefers-color-scheme)媒体查询，它为W3C标准且获Chrome 87+、Firefox 96+、Safari 14+广泛支持。
light-dark() 函数目前**不是标准 CSS 函数**，浏览器原生不支持。你看到的可能是某些框架（如 Tailwind CSS 3.4+ 的实验性暗黑模式插件）或 PostCSS 插件生成的语法糖，但直接写在 CSS 文件里会无效。
用 prefers-color-scheme 媒体查询才是可靠方案
这是 W3C 标准、所有现代浏览器（Chrome 87+, Firefox 96+, Safari 14+）都支持的方式，直接作用于图片的 src 或 background-image 切换逻辑需配合 HTML/JS，但 CSS 层可控制显示哪张图：
- 对
<img alt="怎样在CSS中实现响应式图片暗黑模式切换_利用light-dark()函数或媒体查询" >：必须用 JS 或<picture></picture>+<source media></source>，纯 CSS 无法改src - 对背景图：可用媒体查询直接切换
background-image - 示例（背景图）：
.hero-banner { background-image: url('/img/banner-light.jpg'); } @media (prefers-color-scheme: dark) { .hero-banner { background-image: url('/img/banner-dark.jpg'); } }
响应式图片本身要和暗黑模式解耦处理
响应式（srcset、sizes、<picture></picture>）解决的是设备像素比与视口宽度问题；暗黑模式解决的是色彩主题偏好——两者正交，需叠加使用：
- 优先用
<picture></picture>：它天然支持media属性，可同时表达「暗黑模式」和「屏幕尺寸」条件 - 错误写法：
<img src="light.jpg" srcset="dark.jpg 1x" media="(prefers-color-scheme: dark)" alt="怎样在CSS中实现响应式图片暗黑模式切换_利用light-dark()函数或媒体查询" >（srcset不解析media） - 正确写法：
<picture> <source srcset="banner-dark@2x.jpg 2x, banner-dark.jpg 1x" media="(prefers-color-scheme: dark) and (min-width: 768px)"> <source srcset="banner-light@2x.jpg 2x, banner-light.jpg 1x" media="(min-width: 768px)"> <img src="banner-light.jpg" alt="..."> </picture>
别忽略 color-scheme 和图片可访问性
仅切换图片还不够。暗黑模式下若图片含文字或图标，需确保其在深色背景下仍可读：
立即学习“前端免费学习笔记（深入）”；
- 给
<img alt="怎样在CSS中实现响应式图片暗黑模式切换_利用light-dark()函数或媒体查询" >添加color-scheme: light dark（告诉浏览器该元素适配双主题，影响表单控件等，对图片本身无直接作用，但属于完整暗黑流程） - SVG 图片可内联并用
currentColor或 CSS 变量控制颜色，比位图更灵活：<svg viewBox="0 0 24 24" class="icon"> <path fill="currentColor" d="M12..." /> </svg> .icon { color: #333; } @media (prefers-color-scheme: dark) { .icon { color: #fff; } } - 避免在图片中嵌入不可替换的文字；真有需要，用
alt文本 + CSS 隐藏图片 + 显式文字容器替代
真正麻烦的从来不是写几行媒体查询，而是得同时考虑：图片加载时机（暗黑模式切换时是否重载）、服务端是否提供两套资源、CDN 缓存策略是否区分 Sec-CH-Prefers-Color-Scheme 请求头——这些在纯前端方案里都被悄悄绕过去了。
