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

Question

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

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

我考虑过有 2 img元素并设置 display隐藏与否取决于该媒体查询。但这感觉有点像一个困惑的解决方案，并且有它的缺点，例如浏览器下载两个图像。

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

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

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

Answer 1

根据WebKit blog您可以使用 HTML picture 标签来实现这种行为。
类似下面的代码被设置为使用 night.jpg当配色方案设置为深色时，但默认为 day.jpg .

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