Untitled

<body>
  <div style="border: 1px solid red;  width: 650px; height: 500px; margin: 0px auto;  pointer-events: none; ;">
    <div class="frame" style="background-color: blue; -webkit-mask-image: url('./assets/Layer1.png'); z-index: 0"></div>
    <div class="frame" style="background-color: red; -webkit-mask-image: url('./assets/Layer2.png'); z-index: 1"></div>
    <div class="frame" style="background-color: grey; -webkit-mask-image: url('./assets/Layer3.png'); z-index: 2"></div>
    <div class="frame" style="background-color: yellow; -webkit-mask-image: url('./assets/Layer4.png'); z-index: 3"></div>
  </div>

  <style>
    .frame {
      position: absolute;
      pointer-events: auto;
      width: 640px;
      height: 490px;
      padding: 1px;
      margin: 0px auto;
      box-sizing: border-box;
    }
  </style>
</body>

let parent = document.getElementById('parent')
    parent.addEventListener('click', function() {
     parent.style.backgroundColor = event.target.style.backgroundColor;
    })