JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background">
    <div id="effect">
        Effect goes here
    </div>
</div>
<svg width="100%" height="100%" viewBox="0 0 200 200">
<defs>
    <filter id="multiply" x="0%"
 y="0%" height="300%" width="300%">
      <feImage x="0" width="400" height="400" y="0" preserveAspectRatio="xMaxYMax meet" xlink:href="http://lorempixel.com/400/400/" />
     <feOffset dx="-100" dy="-100"/>
        <feBlend mode="multiply" in="SourceGraphic"/>
    </filter>
    </defs>
</svg>

CSS

#background {
    background-image: url(http://lorempixel.com/400/400/);
    height: 400px;
    width: 400px;    
    position: fixed;
}
#effect {
    color: #fff;
    height: 200px;
    width: 200px;
    margin: 100px 10px 10px 100px;
    background-color: #ff0;
    -webkit-filter: url(#multiply);
    -moz-filter: url(#multiply);
        filter: url(#multiply);
}

svg{
    visibility: none;
    padding: none;
}