反转文本颜色？答案

【问题标题】：Invert the color of text?反转文本颜色？
【发布时间】：2013-01-15 01:33:37
【问题描述】：

我有一个横向滚动的页面和一个浮动菜单。我希望菜单中的文本反转它下面的颜色。有没有办法用 HTML5、Javascript 和/或 jQuery 做到这一点？

添加：当图像越过页面的不同部分时，您将如何反转图像？ CSS？

这是我用于菜单的 CSS 部分

body{
  background:#000;
  font-family:Georgia;
  font-size: 34px;
  font-style: italic;
  letter-spacing:-1px;
  width:12000px;
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
}
ul#banner{
  position: fixed;
  line-height: 45px;
  margin: 0 30px; padding: 0; 
}

【问题讨论】：

对于这样的混合模式，您可能需要使用canvas 进行渲染，尽管我认为我已经阅读了一些关于某些浏览器的 CSS 支持混合模式的提示。 Some reading here.
@MartyWallace 我想知道是否需要使用画布。我想鼓励我的用户使用 chrome，那么它可以使用它吗？
如果您想支持很多这样的好东西，Chrome 是一个不错的选择。
请先搜索。很容易找到：blogs.adobe.com/webplatform/2012/07/17/… 请注意，这需要[高级] CSS3。 JS/jQuery 可以通过“读取”背景颜色然后调整前景色来模拟它在元素级别。可以使用画布，但使文本“不是文本”并且不支持与背景内容 AFAIK 混合。 SVG也可能有一些可能..
我建议还是不要这样做，因为它会在很多颜色上变得丑陋且不可读（更不用说复杂的背景——如果你想动态地这样做，我假设你有）。

标签： javascript jquery css html

【解决方案1】：

步骤1。获取菜单的位置

第二步。删除您的菜单并获取放置在位置上的元素

也许你可以使用 document.elementFromPoint

步骤 3。反转元素的颜色并将其应用于您的菜单

第四步。再次显示您的菜单

步骤 5。每当您需要更改菜单的颜色（滚动等）时重复此操作

【讨论】：

这就是我的想法。如果我不能反转图像，我会尝试。

【解决方案2】：

尝试使用：

var color = // color in hex.
color ^ 0xFFFFFF (XOR bit operator) to get it?

【讨论】：

但是如何从它下面获取页面的颜色呢？
我们可以使用 jQuery('ul#banner').css('background-color') 吗？

【解决方案3】：

我写了一个测试页。 demo here。 inside body 不能写宽度，否则会使页面出现滚动条。包括以下知识点：

css 封面：

.nav .selected .nav-01{background:#f93;}
.nav .selected .nav-02{background:#3c3;}
.nav .selected .nav-03{background:#36c;}

jquery 插件：

(function($){
  $.fn.extend({
    first: function(){ },
    second: function(){}
  });
}(jQuery));

jquery 调用

$(document).ready(function(){
    $('#content').scrollPage({
        pTag   : '.list',
        menu   : '.nav',
        speed  : 600
    });
})

【讨论】：

这不是我想要的。对不起，如果我占用了你的一些时间。