使用 Chrome 开发工具在浏览器中叠加透明图像 window

Question

我正在寻找一种方法来在我正在使用 chrome 开发工具查看的当前页面上叠加图像。覆盖层需要透明，我必须能够与图像层下方的页面进行交互。

这可能吗？如果我可以将 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);

使用 Chrome 开发工具在浏览器中叠加透明图像 window

Use Chrome Dev Tools to overlay transparent Image in Browser window

javascript

frontend

google-chrome-devtools