根据直播背景颜色动态适配文字颜色

如何解决根据直播背景颜色动态适配文字颜色

您好，我目前正在开发一个网站，我正在将灰色文本与黑色和白色壁纸结合在一起（它实际上是带有月亮、星星和云彩的星空背景，从左到右移动）文本仍然完全可见当文本与白色部分（月亮）处于同一水平时，文本变得难以阅读，即使云彩从灰色文本下方穿过。这是帮助理解的图像：The moon hide the text（云移动）i need half black and half white

为了解决这个问题，出于审美原因，我试图改变文本颜色与背景颜色相比，所有这些都是我发现的一个例子：

https://css-tricks.com/reverse-text-color-mix-blend-mode/

然而，我无法将其调整到我的项目中。

那么我们如何根据文本背后图像的亮度自动切换到文本的较暗版本（这里，当文本从月亮前面经过或当云从文本后面经过时）

解决方法

你能分享一些你项目中的代码片段吗？

我认为可能是因为您的字体是灰色的，请尝试将其更改为白色。 或者您可以尝试将其更改为：

color: white;
mix-blend-mode: difference;