將圖像轉換爲灰度指針

我試圖通過將彩色背景與使用Photoshop在B & W中修改的相同圖像重疊來將背景圖像變成灰度。彩色圖像應該在光標後變成灰度。所以，很簡單這個快速查看解釋： http://jsbin.com/dediqefero/1/edit?html,css,js,output 將圖像轉換爲灰度指針

我在兩者的div的設置背景圖片，但在B & w的一種我不能插入一個100％的高度，因此圖像可以」不適合另一個，也不能全屏響應。如何更改背景圖像的尺寸以讓B & W適合彩色的尺寸？

感謝所有;）

來源

2014-11-23 EllyFellici

發生這種情況，因爲你已經使用的.content定位center center，並且你已經使用過background-size。

如果你想要做的這些類型的調整，你需要將它們應用到這兩個背景.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';

記住存儲_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';

快速DEMO（我跳過.content校正的位置，因爲我寫的香草）

來源

2014-11-23 17:52:53

我跳過了修正是在這兩個_x_和_y_在我的屏幕上的小提琴大約3-8 px_，但是這只是該頁面。如果您希望代碼在任何頁面上工作，您需要動態計算偏移量。你似乎已經知道如何在_jQuery_中做到這一點^^ Vanilla包含循環與'.offsetParent' – 2014-11-23 18:03:02

太棒了！謝謝 – EllyFellici 2014-11-23 18:05:00

將圖像轉換爲灰度指針

回答

相關問題