如何根据 CSS 首选颜色方案更改图像源？

Question

我正在尝试将新的 CSSprefers-color-scheme媒体查询集成到我的网站中。我有一个img（图像）元素，其中图像非常深蓝色。新的黑暗模式设置看起来真的很糟糕。

有没有办法根据该 CSS 媒体查询轻松更改此图像的来源？

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

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

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

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

Answer 1

根据WebKit 博客，您可以使用 HTMLpicture标记来实现此行为。

如下面的代码事情是设置为使用night.jpg时的配色方案设置为黑色，但默认day.jpg。

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