使用 Chrome Dev Tools 在浏览器中叠加透明图片 window

Question

I am looking for a way to overlay an Image over the current page I am viewing with the chrome dev tools. The overlay needs to be transparent and I must be able to interact with the page below the image layer.

Is that possible? It would be best, if I could paste a URL to the image with the rest of the code.

Thanks for your help:)

Answer 1

Yes, it is possible. The CSS property you are looking for is 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);
}

Usage:

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