更改css中的重叠像素

Question

在某些网站上，光标是某种形状，这很容易做到，用一些 css 跟随鼠标创建一个 div。

但在其他一些网站上，我看到当光标移动时，它会根据悬停在哪个元素上逐个像素地过滤，例如：

圆圈是光标。当它在红色方块上时，那些重叠的像素是青色的，其他的都是红色的，圆圈的其余部分是原来的白色。

如何在css/js/html中实现

任何帮助表示赞赏？

Answer 1

看看mix-blend-mode。还是很新的，不过chrome、firefox、opera都支持了

let img = $("#cursor");

$(document).on('mousemove', function(e){
    img.css({
       left:  e.pageX,
       top:   e.pageY
    });
});

#cursor {
  position: absolute;
  mix-blend-mode: difference;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://picsum.photos/200">

<img src="https://picsum.photos/32" id="cursor">