Javascript 文本颜色始终与背景图像颜色相反？

所以我在网站上有一个固定的透明标题菜单，上面有全宽/全高的黑白照片。我想知道是否有一种方法（使用纯CSS或某种JS实现）可以使菜单文本的颜色始终与我所在的任何滚动位置的背景颜色相反。基本上，这些照片在不同的地方从很亮变为很暗，所以当你滚动时，如果我将其设置为始终为白色或始终为黑色，则很难看到大部分滚动的菜单

有没有办法实现这一点？

tl；医生：是的

如果我需要实现这一点，这是我的思考过程，所以你可能需要将你的问题分成子问题，然后搜索这些子问题：

css不能检查，javascript可以。因此，第一步是研究Javascript解决方案

接下来要回答的问题是如何选择页面上某个位置上的任意点：。这个问题很酷，看看吧

下一个要回答的问题是如何选择“相反的颜色”（总是一个有趣的编程练习）：

下一个要回答的问题是，什么时候调用这个更新函数（滚动），这是非常简单的，你会找到很多相关的教程

最后一步是将颜色代码应用于要更新的元素样式。我想这并不是你现在所质疑的

---

祝你好运

混合模式是否可以选择。。。但还没有最好的浏览器支持

正文{
背景：url(http://farm4.staticflickr.com/3694/8959572838_57fa40bdb4_c.jpg)不重复；
背景尺寸：封面；
背景附件：固定；
}
div{
字体大小：140px；
文本对齐：居中；
颜色：白色；
混合模式：排除；
}

嘿，那里

嘿，那里

嘿，那里

嘿，那里

嘿，那里

嘿，那里

嘿，那里

嘿，那里

图像是硬编码的/静态的还是一直在变化的？是的。可能有一种方法可以实现预期的结果。你能包括

html

和你试图解决的问题吗？@Jeff他们会定期更改，否则我会在滚动距离改变颜色或其他方面做一些黑客操作。@guest271314我还没有研究任何可行的方法，我想看看从哪里开始（无论是CSS还是JS）。我还没有在网上找到任何可以在任何背景下使用的解决方案（这些解决方案最初都提供了背景）。@AKor，如果它们是相同的，那么这将是最好的方法。再仔细研究一下，有些犹豫：1。你能在没有画布的情况下获得html页面中任意点的颜色吗？（还不确定，也许你可以制作一个页面的快照并将其放在画布上，然后获取图像日期）。2.这是一个非常昂贵的操作，因此请确保滚动检查间隔不要太频繁。（另一种选择是，如果您知道要显示的图像，可以使用GD lib或其他方法计算服务器端的图像，并根据服务器端的计算调整css）关于html->canvas的一些想法，这正是我想要的。奇怪的是，我的页面上似乎无法正确运行它。无论背景如何，添加混合模式规则都会导致文本从全黑色变为浅灰色。我正在对包含文本的应用规则，就像你一样。@AKor如果你像我的样本一样使用彩色图像会怎么样？@AKor添加了一个带有黑白图像的2:nd样本，以确保goofy在thoseAh上没有发生任何事情好的，这是因为我使用的是Chrome，它似乎只在Safari中对我有效。在您的第一个示例中，底部有一些看起来像JSON的代码，排除效果对该文本非常有效（不确定这是否是有意的），但对图像本身（在Chrome中）却没有效果。@AKor这是内置控制台应用程序，它的代码片段由于某种原因导致错误，它与我的示例无关，但也可能导致我的代码出错。我在上面的两个样本中关闭了它，还做了一把小提琴：