在指针后将图像转换为灰度

Question

我正在尝试通过将彩色背景与使用photoshop在B＆amp; W中修改的相同图像重叠来将背景图像转换为灰度。 彩色图像应在光标后变为灰度。 用这个快速视图解释起来更简单： http://jsbin.com/dediqefero/1/edit?html,css,js,output

我已经在两个div中设置了背景图像，但在b＆amp; w中我无法插入100％的高度，因此图像无法适应另一个，也无法响应全屏。 如何更改背景图像尺寸以使B＆amp; W适合彩色尺寸？

谢谢大家;）

Answer 1

这种情况正在发生，因为您在center center的定位中使用了.content，并且您也使用了background-size。

如果您想进行这些类型的调整，则需要将它们应用于后台.content和前景.grey，您无法在 CSS - 您需要使用 JavaScript 计算自己的偏移量等。

使用像素值测试 background-size 会使其看起来不稳定，并在光标移动时抖动。

你可以很容易地计算中心

// 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';

请务必存储_h和_w，以便您可以使用例如.gray对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

快DEMO（我跳过了{{1}}更正的位置，因为我是用香草写的）