我有一个白色的图像在一个波形及其动画，当用户打开我的网站在移动的设备上，并启用黑暗模式的网站将是黑暗的，但这个图像仍然是白色的所以我的问题是我如何解决这个问题？像改变图像，如果黑暗模式是启用或其他东西
a64a0gku1#
在图片中使用<picture>元素。在该元素中添加一个或多个<source>元素。这些源元素使用媒体查询（类似于CSS）来确定srcset中的资源是否应该基于媒体查询来使用。在您的情况下，您可以检查prefers-color-scheme: dark查询以查看是否启用了dark模式。如果未启用，则使用映像上的 defaultsrc。如果启用，则<source>元素上的srcset将用作映像上src的新值。
<picture>
<source>
srcset
prefers-color-scheme: dark
src
<picture> <source srcset="dark-image.jpg" media="(prefers-color-scheme: dark)"> <img src="light-image.jpg" alt="Animated wave shape"> </picture>
1条答案
按热度按时间a64a0gku1#
在图片中使用
<picture>元素。在该元素中添加一个或多个<source>元素。这些源元素使用媒体查询（类似于CSS）来确定srcset中的资源是否应该基于媒体查询来使用。在您的情况下，您可以检查
prefers-color-scheme: dark查询以查看是否启用了dark模式。如果未启用，则使用映像上的 default
src。如果启用，则
<source>元素上的srcset将用作映像上src的新值。