Как получить изображение поверх другого сайта

Question

Я пытаюсь прототип своего рода фонарика, который будет «загораживать» веб-страницы. Я сделал это, поставив черное изображение с прозрачным отверстием посередине, на фоне. Я изо всех сил, чтобы придумать способ, чтобы разместить код таким образом, что осязаемо, но здесь файлы (вся серия под 2mb, открытые в хроме): https://www.dropbox.com/sh/1cyl710mmhtbo51/843TzPcuQ_

Я сейчас пытаюсь заменить фон веб-сайт , которые в моем примере являются изображениями, с реальными сайтами. Я пробовал iframes, но обнаружил, что это неуспешно, поскольку вы не можете вставлять google и т. Д. Может ли кто-нибудь подумать о том, как я мог бы нарисовать темное изображение над живым веб-сайтом?

Это только нужно для демонстрации на моем собственном ноутбуке.

Answer 1

Если вам нужно всего лишь работать на вашем компьютере, просто скопируйте источник страницы в файл HTML и сохраните его. Затем вы можете отредактировать его так, как хотите. Возможно, вам придется настроить URL-адреса, чтобы изображения и CSS работали правильно.

Answer 2

Я не уверен, что это то, что вы ищете, во всяком случае; jsfiddle

document.body.appendChild(lightContainer); 
lightContainer.appendChild(light); 
lightContainer.onmousemove = function(e) { 
    var posX = e.clientX; 
    var posY = e.clientY; 
    light.style.left = -5000 + posX +'px'; 
    light.style.top = -5000 + posY + 'px'; 
}; 

Вы не видите ничего под ним, потому что я не мог найти прозрачное изображение. В разделе контента вы можете разместить все, что хотите.