如何根据 CSS prefers-color-scheme 更改图像源？

Posted 2023-03-06

【中文标题】如何根据 CSS prefers-color-scheme 更改图像源？

【英文标题】：How to change image source based on CSS prefers-color-scheme?

【发布时间】：2019-09-11 05:16:00

【问题描述】：

我正在尝试将新的 CSS prefers-color-scheme 媒体查询集成到我的网站中。我有一个img (image) 元素，其中的图像是very 深蓝色。新的暗模式设置看起来真的很糟糕。

有没有一种方法可以根据 CSS 媒体查询轻松更改此图像的来源？

我考虑过使用 2 个 img 元素并将 display 设置为隐藏或不隐藏，具体取决于该媒体查询。但这感觉有点像一个混乱的解决方案，并且有它的缺点，例如浏览器下载两个图像。

我也考虑过使用 background-image 做一个 CSS 技巧，但我更反对使用 2 个 img 元素并隐藏和显示它们。

最后，我当然认为这可以使用 javascript。但是这个网站我特别考虑兼容性，有些浏览器允许用户一起关闭 JavaScript，所以在这种情况下我不喜欢 JavaScript 解决方案。

除了上面列出的那些解决方案之外，还有其他方法可以在这里做我想做的吗？

【问题讨论】：

请分享代码

你的情况可能很有趣：***.com/questions/12158540/…

【参考方案1】：

根据WebKit blog你可以使用html的picture标签来实现这个行为。

当配色方案设置为深色时，类似以下代码的代码设置为使用night.jpg，但默认为day.jpg。

<picture>
    <source srcset="night.jpg" media="(prefers-color-scheme: dark)">
    <img src="day.jpg">
</picture>