时间戳

首页 > 解决方案 > 更改图层下方的文本颜色

html - 更改图层下方的文本颜色

问题描述

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

如果我有这样的事情： 例子

.

如何仅更改此部分的颜色： 形状是 HTML 元素还是容器的背景图像都没有关系。示例2

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

我的代码：

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

标签： htmlcss

解决方案

一种方法是将容器中除了 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>

推荐阅读