JSFiddle - React, Tailwind, and code Playground

HTML

<h1><span>ABCDEFGHIKJ</span></h1>

CSS

body {
    background: url(http://www.crystalxp.net/galerie/img/img-wallpapers-colors-krystof-----15400.jpg) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff; overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}span { 
    background: url(http://www.crystalxp.net/galerie/img/img-wallpapers-colors-krystof-----15400.jpg) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}

JavaScript

$(document).ready(function(){
  var position = $("h1").position();
  var padding = 10;
  var left = position.left + padding;
  var top = position.top + padding;
  $("h1").find("span").css("background-position","-"+left+"px -"+top+"px"); 
});