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

I'm trying to turn a background-image into grayscale by overlapping a colored background with the same image modified in B&W with photoshop. The colored image should turn into grayscale following the cursor. It's simpler to explain with this quick view: http://jsbin.com/dediqefero/1/edit?html,css,js,output

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

I've set the background image in both of the divs, but in the b&w one I can't insert a 100% height so the image can't fit to the other one, neither can be responsively full screen. How can I change the background-image dimensions to let the B&W one fit to the colored one?

我已经在两个div中设置了背景图像,但是在黑白中我无法插入100%的高度,因此图像不能适合另一个,也不能响应全屏。如何更改背景图像尺寸以使B&W适合彩色尺寸?

Thanks all ;)

谢谢大家;)

1 个解决方案

#1

This is happening because you've used center center in the positioning of .content, and you have used background-size too.

发生这种情况是因为你在.content的定位中使用了中心,你也使用了背景大小。

If you want to do these types of adjustments, you need to apply them to both the background .content and foreground .grey which you can't do in CSS - you'd need to calculate your own offsets etc using JavaScript.

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

Testing background-size with pixel values makes it seem unstable and wobble around as the cursor moves.

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

You can calculate the centre pretty easily though

你可以很容易地计算中心

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

Remember to store _h and _w so you can do the same adjustment on .gray with e.g.

请记住存储_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';

Quick DEMO (I skipped the position of .content correction because I wrote it in vanilla)

快速演示(我跳过.content校正的位置因为我用香草写的)

#1