kiinlam
8/24/2015 - 9:33 AM

Add an semi-transparent image overlay over your page to have pixel-perfect integration with your designs.

Add an semi-transparent image overlay over your page to have pixel-perfect integration with your designs.

// imgOverlay.js
// https://github.com/bgrins/devtools-snippets
// Add an semi-transparent image overlay over your page to have pixel-perfect integration with your designs.
(function() {
    var storageKey = 'overlay-default';
    var overlayDefault = localStorage.getItem(storageKey) || '';
    var url = prompt('paste overlay url', overlayDefault);
    if (url) {
        localStorage.setItem(storageKey, url);
        var overlay = document.createElement('div');
        overlay.style.position = 'absolute';
        overlay.style.left = 0;
        overlay.style.top = 0;
        overlay.style.width = '100%';
        overlay.style.height='100%';
        overlay.style.backgroundImage = 'url(' + url + ')';
        overlay.style.backgroundSize = 'cover';
        overlay.style.zIndex=10000;
        overlay.style.opacity = 0.5;
        overlay.style.pointerEvents = 'none';
        document.body.appendChild(overlay);
    }
})();