<div class="control">
  <div class="switch-container">
    <input type="checkbox" id="switch" checked/>
    <label for="switch" class="label"></label>
  </div>

  <select id="select">
    <option value="auto">auto</option>
    <option value="90% 70%" selected="">90% 70%</option>
    <option value="50%">50%</option>
    <option value="300px 100px">300px 100px</option>
    <option value="contain">contain</option>
    <option value="cover">cover</option>
  </select>
</div>

<div class="container">
  <div class="element">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo possimus quis, accusantium officiis enim mollitia nam recusandae architecto? Deserunt, rem sed repellat animi quas consectetur consequatur quisquam id hic mollitia exercitationem, laudantium nam minus itaque necessitatibus doloremque officiis velit? Perspiciatis fugiat optio alias magni veniam reprehenderit, officia quos repellendus eveniet aperiam iure beatae aut? Necessitatibus autem fugit quasi nam earum modi quaerat nemo blanditiis nulla officiis alias, harum labore. Officiis ut optio nobis expedita temporibus voluptates in, autem consequuntur dolore ratione quasi corporis doloremque ab culpa exercitationem? Inventore voluptates assumenda itaque consequatur asperiores officiis debitis sunt minima? Dolor, commodi distinctio.
  </div>
</div>
* {
  box-sizing: border-box;
}

body { 
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  font-family: Helvetica, sans-serif;
}

.control {  
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 600px;
  max-width: 100%;
  gap: .5em;
  padding: 3em 1em;
}

.switch-container {
  display: flex;
  align-items: center;
  gap: .5em;
}

.label {
  cursor: pointer;
}

.label::after {
  content: "No Mask";
}

#switch:checked + .label::after {
  content: "Mask";
}

.container {
  display: block;
  max-width: 400px;
  border: 2px dashed #ccc;
}

.element {
  background-image: linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%);
  /* https://www.gradientmagic.com/browse */
  line-height: 1.6;
  text-align: justify;
  color: #646464;
  color: #fff;
  padding: 0 1em;
  -webkit-mask-image: url(https://i.imgur.com/P1bFwVG.png);
          mask-image: url(https://i.imgur.com/P1bFwVG.png);
  -webkit-mask-size: 90% 70%;
          mask-size: 90% 70%;          
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
    var element = document.querySelector('.element'),
    checkbox = document.querySelector('#switch');

    checkbox.addEventListener('change', function () {
      if(checkbox.checked) {        
        element.style.MaskImage = 'url(https://i.imgur.com/P1bFwVG.png)';
        element.style.webkitMaskImage = 'url(https://i.imgur.com/P1bFwVG.png)'; 
      }
      
      else {
        element.style.MaskImage = 'none';
        element.style.webkitMaskImage = 'none'; 
      }
    }, false);   
    
    
    var sizeSelect = document.querySelector('#select');
    
    sizeSelect.addEventListener("change", function (e) {

      element.style.MaskSize = e.target.value;
      element.style.webkitMaskSize = e.target.value;
    });  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.