changing text color that is beneath a layer

Question

if I have a normal text ( <h1> for example ) that is covered with any element representing a shape, How do I change the part of text that is crossed with the shape.

if I have something like this:

.

How do I change the color of this part only: It dose not matter if the shape is an HTML element or a background image for the container.

Note: I know that I can play with the opacity to get a different color for the crossed part. but I want to set any color I want.

my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: uppercase;
}

body {
    font-family: sans-serif;
    font-size: 6vw;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

#con {
    position: relative;
}

h1:not(#cloned) {
    color: blue;
    position: absolute;
    top: 0;
    left: 0;
}

#cloned {
    color: transparent;
}

#shape {
    display: inline-block;
    height: 18.7vw;
    width: 18.7vw;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 5%;
    right: 10%;
    opacity: 50%;
}
    </style>
</head>
<body>
    <div id="con">
        <h1>this is<br>awesome</h1>
        <h1 id="cloned">this is<br>AWESOME</h1>
        <div id="shape"></div>
    </div>
</body>
</html>

I have added my code! and I read about `mix-blend-mode` and didn’t find something related to choosing my own color... — Faisal, Jan 20 '21 at 11:27
Would it be OK to introduce a bit of Javascript? (not saying whether you maybe can or can't do it with mix-blend-mode but it can be tricky getting any color you want). — A Haworth, Jan 20 '21 at 12:49

A Haworth · Accepted Answer · 2021-01-22T16:32:52.717

One way to do this is to make everything in the container except the h1 text into an image which can then be used to mask the cloned text (which we make the required color rather than transparent).

As the requirement was to have any sort of content beneath the text, html2canvas is used to make a canvas and then convert it to an image. This is then used to mask the cloned text.

There are questions around whether it is required that opacity be carried over to the intersection color. I assumed not because it looked rather washed out, but it can be kept if required. Also, html2canvas may not cope with absolutely all the formatting in any underlying HTML - whether this matters depends on the use-case.

Here is the code. Note that element shape can contain HTML. Remember to replace the copy of the html2canvas library with a copy of your own. Downloadable to your machine from github for example.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ahweb.org.uk/html2canvas.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: uppercase;
    overflow: hidden;
  }

  #container {
    font-family: sans-serif;
    font-size: 6vw;
    display: flex;
    height: 100vh; /* 100vh doesn't work on Safari IOS because of its definition of vh (not same as innerHeight). See hack in the JS code. */
    justify-content: center;
    align-items: center;
  }

  #con {
    position: relative;
    overflow: hidden;
  }
  #con h1 {
    top: 0;
    left: 0;    
 }
  #text {
    position: relative;
    color: blue;
  }
 
 #cloned {
    position: absolute;
    color: lime;  /* THE COLOR YOU WANT THE OVERLAPPING BIT OF TEXT TO BE */
 }

  #shape {
    display: inline-block;
    height: 18.7vw;
    width: 18.7vw;
    border-radius: 50%;
    position: absolute;
    top: 5%;
    right: 10%;
    background-color: red;
    opacity: 0.5;
  }

  </style>
</head>

<body>
  <div id="container">
    <div id="con">   
      <h1 id="text">this is<br>awesome</h1>
      <div id="shape"></div>   
      <h1 id="cloned">this is<br>awesome</h1>
    </div>
  </div>   
  <script>
    const container = document.getElementById('container');
    const con = document.getElementById('con');
    
  function resize() {
    container.style.height = window.innerHeight + 'px';
    
    let w = con.offsetWidth;
    let h = con.offsetHeight;
    
    const textel = document.querySelector('#text');
    const cloned = document.querySelector('#cloned');
    const shape = document.querySelector('#shape');
    
    //get an image of everything except the masking text so we can use it to mask the cloned
    textel.style.opacity = 0;
    cloned.style.opacity = 0;
    shape.style.opacity = 1;
    html2canvas(document.querySelector("#con"), {backgroundColor: null, scale: 1, width: w, height: h, allowTaint: true, useCORS: true}).then(canvas => {    
      
      // now we set the cloned to be masked by all the shape
        cloned.style.opacity = 1;
        shape.style.opacity = 0;
        cloned.style.maskImage = 'url(' + canvas.toDataURL() + ')';
        cloned.style.WebkitMaskImage = 'url(' + canvas.toDataURL() + ')';

        textel.style.opacity = 1;
        shape.style.opacity = '';        
      });
      
  }  
  resize();
  window.addEventListener('resize', resize);
  </script>
</body>
</html>

Good news - I learned quite a bit considering your question so thanks too! — A Haworth, Jan 23 '21 at 23:12

changing text color that is beneath a layer

1 Answers1