怎样在CSS中实现响应式图片暗黑模式切换_利用light-dark()函数或媒体查询-css教程-PHP中文网

light-dark()函数目前不是标准CSS函数，浏览器原生不支持；可靠方案是使用@media (prefers-color-scheme)媒体查询，它为W3C标准且获Chrome 87+、Firefox 96+、Safari 14+广泛支持。

怎样在css中实现响应式图片暗黑模式切换_利用light-dark()函数或媒体查询

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 层可控制显示哪张图：

对：必须用 JS 或 + ，纯 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、）解决的是设备像素比与视口宽度问题；暗黑模式解决的是色彩主题偏好——两者正交，需叠加使用：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

优先用：它天然支持 media 属性，可同时表达「暗黑模式」和「屏幕尺寸」条件
错误写法：（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)">
  @@##@@
</source></source></picture>

别忽略 `color-scheme` 和图片可访问性

仅切换图片还不够。暗黑模式下若图片含文字或图标，需确保其在深色背景下仍可读：

给添加 color-scheme: light dark（告诉浏览器该元素适配双主题，影响表单控件等，对图片本身无直接作用，但属于完整暗黑流程）

SVG 图片可内联并用 currentColor 或 CSS 变量控制颜色，比位图更灵活：

<svg viewbox="0 0 24 24" class="icon"><path fill="currentColor" d="M12..."></path></svg>
.icon { color: #333; }
@media (prefers-color-scheme: dark) {
  .icon { color: #fff; }
}