如何根据背景颜色更改固定文本的颜色
有谁知道纯 CSS 解决方案可以使固定 svg 的每个部分根据背景颜色（浅色或深色）改变颜色，就像 此网站及其徽标。 我尝试查看代码，但没有看到任何可以解释此行为的内容。 也许他们正在使用 js 解决方案，但我无法想象他们是如何做到的。
我检查过：
- svg 的填充颜色：它没有改变。
- svg 和父级的每个 css 值：据我所知，没有什么可以解释这种行为。
有人知道该怎么做吗？
Does anyone know a pure css solution to make every part of a fixed svg change color based on the background color (light or dark), just like in this website and their logo.
I tried to look at the code, but i don't see anything that can explain this behaviour.
Maybe they are using a js solution but i can't imagine how they do it.
I've checked:
- The fill color of the svg: it doesn't change.
- Every css value of the svg and the parent: nothing that can explain this behaviour to my knowledge.
Anyone knows how to do this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
简而言之，您不能根据 CSS 中元素或其父元素的背景颜色为元素分配
color属性。但是，您可以使用
mix-blend-模式应用一些考虑前景和背景的颜色效果。这就是他们在您的网站示例中所做的事情。
如果您检查菜单的属性，您会注意到
颜色与背景相同。但由于mix-blend-mode: Difference，如果背景是黑色，则会计算出与背景颜色相同的黑色，或者计算出白色。这样做的真正好处是可以在角色中间以不同的方式计算颜色。这甚至适用于视频。
Simply speaking, you cannot assign a
colorproperty to an element based on its or its parent’s background-color in CSS.But, you can use
mix-blend-modeto apply some color effect that takes into account fore- and background.This is what they do in your site example.
If you inspect the MENU’s properties, you will notice that the
coloris the same as the background. But due tomix-blend-mode: difference, it will be calculated black with the same color in the background, or white, if the background is black.What’s really nice about this is that colour can be calculated differently in the middle of a character. This even works on top of video.