How to use different background colors in mixed blend mode multiply to achieve knockout text effect successfully

Question

I have a quick question for a small project I am building. The knockout text effect created in the code pen above uses mixed blend mode: multiply to achieve the desired knockout effect. For this to work, the parent div (.text) needs to have a background color of black and the actual text needs to have a color of white to create the knockout effect. I am looking to implement a yellow background color but mixed blend mode multiply requires black and white to work; are there any solution to achieve my goal of having a yellow background color? All help will be greatly appreciated: Here's my codepen and the code below: https://codepen.io/justjoinednow/pen/eYMjLxP

 var scale = (window.innerWidth / 175) + 2.5; // window / character width + scale padding console.log(scale); var distanceFromViewportCenterToCharCenter = 350; var offsetAfterScaling = distanceFromViewportCenterToCharCenter * scale; var endScale = 0.2; gsap.fromTo( ".title", { opacity: 0, transform: `translate(${offsetAfterScaling}px, 0) scale(${scale})`, }, { opacity: 1, transform: `translate(0, 0) scale(${endScale})`, duration: 5 } );

 * { margin: 0; padding: 0; }.parent { display: flex; justify-content: center; align-items: center; margin: 0 auto; height: 100% }.text { background-color: black; background-size: cover; height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; margin: 0 auto; mix-blend-mode: multiply; overflow: hidden; } #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; }.title { color: white; font-size: 1000px; font-weight: bold; text-align: center; opacity: 0; position: relative; backface-visibility: hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script> <div> <video autoplay muted loop id="myVideo"> <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video> <div class="parent"> <div class="text"> <h1 class="title">CCCCCC</h1> </div> </div>

Answer 1

There should be a way to do this without mix-blend-mode and instead using color:transparent and backdrop-filter:opactiy(0%); but using backdrop filter is so frustrating that i have been trying for the last half hour and still haven't managed to.