我正在尝试将新的CSS prefers-color-scheme媒体查询集成到我的网站中。我有一个img（图片）元素，其中图片非常是深蓝色。在新的黑暗模式设置下，这看起来真的很糟糕。
是否有一种方法可以根据CSS媒体查询轻松更改此图片的来源？
我考虑过拥有2个img元素，并根据该媒体查询将display设置为隐藏还是不隐藏。但这似乎有点麻烦，而且它有缺点，例如浏览器下载两个图像。
我还考虑过使用background-image做CSS技巧，但我比拥有2个img元素并隐藏并显示它们更加反对。
最后，我当然可以使用JavaScript来实现。但是我特别考虑这个站点的兼容性，并且某些浏览器允许用户一起关闭JavaScript，因此在这种情况下我不喜欢JavaScript解决方案。
除了上面列出的那些解决方案之外，还有其他方法可以做我想做的事情吗？
答案 0 :(得分：0)
根据WebKit blog，您可以使用HTML picture标签来实现此行为。
在将配色方案设置为深色但默认设置为night.jpg时，将类似以下代码的内容设置为使用day.jpg。
<picture>
<source srcset="night.jpg" media="(prefers-color-scheme: dark)">
<img src="day.jpg">
</picture>