更改图层下方的文本颜色答案

【问题标题】：changing text color that is beneath a layer更改图层下方的文本颜色
【发布时间】：2023-03-17 14:24:01
【问题描述】：

如果我有一个普通文本（例如<h1>），上面覆盖着任何代表形状的元素，我该如何更改与该形状交叉的文本部分。

如果我有这样的事情：

如何只改变这部分的颜色： 形状是 HTML 元素还是容器的背景图像无关紧要。

注意： 我知道我可以使用不透明度来为交叉部分获得不同的颜色。但我想设置任何我想要的颜色。

我的代码：

<!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>

【问题讨论】：

你应该至少添加一部分代码
了解混合混合模式
我已经添加了我的代码！我读到了mix-blend-mode 并没有找到与选择我自己的颜色相关的东西......
相关：stackoverflow.com/a/55425325/8620333
可以介绍一点Javascript吗？（不是说你是否可以或不能使用混合混合模式，但获得任何你想要的颜色可能会很棘手）。

标签： html css

【解决方案1】：

做到这一点的一种方法是将容器中除 h1 文本之外的所有内容制作成图像，然后该图像可用于遮盖克隆文本（我们将其设置为所需的颜色而不是透明）。

由于要求在文本下方有任何类型的内容，html2canvas 用于制作画布，然后将其转换为图像。然后用它来掩盖克隆的文本。

关于是否需要将不透明度转移到交叉点颜色存在一些问题。我认为不是因为它看起来相当褪色，但如果需要，它可以保留。此外，html2canvas 可能无法完全处理任何底层 HTML 中的所有格式 - 这是否重要取决于用例。

这里是代码。请注意，元素形状可以包含 HTML。请记住用您自己的副本替换 html2canvas 库的副本。例如，可从 github 下载到您的机器。

<!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>

【讨论】：

太棒了?。非常感谢，这对我有帮助！
好消息 - 考虑到您的问题，我学到了很多东西，所以也谢谢！