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);
}
})();