根据实时背景颜色动态适配文本颜色

Question

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

为了尝试解决这个问题，出于美学原因，我尝试将文本的颜色与背景颜色进行比较，这是我发现的一个例子：

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

但是我无法使其适应我的项目。

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

Answer 1

您能分享一些您项目中的代码 sn-p 吗？

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

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