Javascript 跟随指针将图像转换为灰度

我正试图通过将彩色背景与使用photoshop在黑白中修改的相同图像重叠，将背景图像转换为灰度。 彩色图像应在光标后变为灰度。 使用此快速视图进行解释更简单：

我在两个div中都设置了背景图像，但在b&w中，我不能插入100%的高度，因此图像不能与另一个匹配，也不能响应全屏。 如何更改背景图像尺寸，使黑白图像与彩色图像相匹配

---

谢谢大家；）

之所以发生这种情况，是因为您在定位

.content

时使用了

center

，并且还使用了

背景大小

如果你想做这些类型的调整，你需要将它们应用到背景
.content
和前景
.grey
，这在CSS中是做不到的-你需要使用JavaScript计算你自己的偏移量等

用像素值测试背景大小会使它看起来不稳定，并且随着光标的移动而摆动

不过，你可以很容易地计算出中心

// after .content exists
var dh = content.offsetHeight,
    dw = content.offsetWidth,
    ih = 1004,
    iw = 1599,
    _h, _w;

_h = (ih / 2) - (dh / 2); // centre image in div vertical
_w = (iw / 2) - (dw / 2); // centre image in div horizontal

content.style.backgroundPosition = -_w + 'px ' + -_h + 'px';

请记住存储
\u h
和
\u w
，这样您就可以在
上执行相同的调整。例如，灰色

gray.style.top = e.y - 50 + 'px';
gray.style.left = e.x - 50 + 'px';
gray.style.backgroundPosition = (50 - e.x - _w) + 'px ' + (50 - e.y - _h) + 'px';

快速（我跳过了
.content
更正的位置，因为我是用香草写的）
我跳过的更正在我屏幕上的小提琴上的x和y都是8像素，但那只是那一页。如果希望代码在任何页面上工作，则需要动态计算偏移量。您似乎已经知道如何在jQuery中使用
.offsetParent