Используйте Chrome Dev Tools для наложения прозрачного изображения в окне браузера.

Question

Я ищу способ наложения изображения на текущую страницу, которую я просматриваю, с помощью инструментов chrome dev. Наложение должно быть прозрачным, и я должен иметь возможность взаимодействовать со страницей под слоем изображения.

Возможно ли это? Было бы лучше, если бы я мог вставить URL-адрес изображения с остальным кодом.

Спасибо за вашу помощь:)

Answer 1

Да, это возможно. Свойство CSS, которое вы ищете, это pointer-events: none.

function addOverlayImage(src, opacity) {
    const img = new Image();
    img.src = src;
    Object.assign(img.style, {
        position: 'fixed',
        left: 0,
        top: 0,
        width: '100vw',
        height: '100vh',
        opacity,
        objectFit: 'cover',
        objectPosition: 'center center',
        pointerEvents: 'none'
    });
    document.body.appendChild(img);
}

Использование:

addOverlayImage('https://i.picsum.photos/id/1/1440/900.jpg', 0.5);