如何在暗模式下更改HTML图像URL

如果系统处于黑暗模式,使用CSS可以很容易地应用更改,使用prefers-color-scheme媒体功能。

在上查看我的博客文章暗模式如果您想了解更多有关它的信息。

今天,我遇到了一个问题-如何更改用HTML而不是CSS规则定义的图像?

事实证明,有一种简单的HTML方式可以做到这一点,而无需涉及任何CSS或JavaScript。

我们可以使用picture标签来包装img标签:

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

如果支持并启用了暗模式,则dark.png图片将用作img标签。

标记得到很好的支持,并且未实现该标记或未实现暗模式的旧版浏览器将退回到显示该标记的位置。light.png图像。

请务必注意,浏览器在任何情况下都不会下载2张图片:如果是暗模式,在此示例中,它将仅下载2张图片。dark.png图片,如果是浅色模式,它将仅下载light.png,因此不会浪费带宽。

免费下载我的HTML手册


更多HTML教程: