css - 如何使用混合混合模式更改动画背景上的文本颜色

Question

我有一个带有 4 个盒子的 codepen，

每个框在移动的背景 svg 顶部都有一个文本。我正在使用混合混合模式在背景更改时反转文本的颜色。例如，如果背景是红色，则文本应该是黄色，如果背景是黄色，则文本应该是红色。

我的问题:

1. 该技术似乎不适用于 Chrome
2. 该技术似乎不适用于十六进制颜色。我是否遗漏了一点，或者这是一个错误？

工作代码笔:https://codepen.io/nicopoggenburg/pen/xxmaeGw

Mac Firefox:否，Mac Chrome:否

.box-1 {
  --light: #FCFAF0;
  --dark: #082605;
}

Mac Firefox:是，Mac Chrome:否

.box-2 {
  --light: yellow;
  --dark: red;
}

Mac Firefox:否，Mac Chrome:否

.box-3 {
  --light: #66CDAA;
  --dark: #FFA500;
}

Mac Firefox:是，Mac Chrome:否

.box-4 {
  --light: green;
  --dark: purple;
}

HTML:

<div class="box box-1">
  <div class="svgs">
    <div class="svg-container">
      <svg class="svg svg-1" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="#082605" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
    </div>
    <div class="svg-container">
      <svg class="svg svg-2" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="#082605" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
    </div>
  </div>
  <h1 class="text" data-text="Do reinvent the wheel">Do reinvent<br>the wheel</h1>
</div>

<div class="box box-2">
  <div class="svgs">
    <div class="svg-container">
      <svg class="svg svg-1" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="red" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
    </div>
    <div class="svg-container">
      <svg class="svg svg-2" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="red" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
    </div>
  </div>
  <h1 class="text" data-text="Do reinvent the wheel">Do reinvent<br>the wheel</h1>
</div>

<div class="box box-3">
  <div class="svgs">
    <div class="svg-container">
      <svg class="svg svg-1" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="#FFA500" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
    </div>
    <div class="svg-container">
      <svg class="svg svg-2" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="#FFA500" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
    </div>
  </div>
  <h1 class="text" data-text="Do reinvent the wheel">Do reinvent<br>the wheel</h1>
</div>

<div class="box box-4">
  <div class="svgs">
    <div class="svg-container">
      <svg class="svg svg-1" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="purple" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
    </div>
    <div class="svg-container">
      <svg class="svg svg-2" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="purple" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
    </div>
  </div>
  <h1 class="text" data-text="Do reinvent the wheel">Do reinvent<br>the wheel</h1>
</div>

CSS:

@keyframes moveWave {
  to {
    transform: translateX(-50%);
  }
}


.box-1 {
  --light: #FCFAF0;
  --dark: #082605;
}
.box-2 {
  --light: yellow;
  --dark: red;
}
.box-3 {
  --light: #66CDAA;
  --dark: #FFA500;
}
.box-4 {
  --light: green;
  --dark: purple;
}

.box {
  position: relative;
  overflow: hidden;
  background: var(--light);
  color: var(--light);
  padding: 20px 0;
  isolation: isolate;
}
.svgs {
  display: flex;
  width: 200%;
  animation: moveWave 5s linear infinite;
  display: flex;
  align-items: center;
}
.svg-container {
  width: 100%;
}
.svg {
  width: 100%;
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 90px;
  text-transform: uppercase;
  margin: 0;
  mix-blend-mode: difference;
  font-weight: 800;
  width: fit-content;
  color: var(--dark);
}

.text:after {
  content: attr(data-text);
  mix-blend-mode: difference;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--light);
}

Answer 1

需要再次使用第二种颜色显示文本(例如，使用.text:after)并应用mix-blend-mode: Difference; :

@keyframes moveWave {
  to {
    transform: translateX(-50%);
  }
}

:root {
  --light: yellow;
  --dark: red;
}
.box {
  position: relative;
  overflow: hidden;
  background: var(--light);
  color: var(--light);
  padding: 20px 0;
}
.svgs {
  display: flex;
  width: 200%;
  animation: moveWave 5s linear infinite;
  display: flex;
  align-items: center;
}
.svg-container {
  width: 100%;
}
.svg {
  width: 100%;
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 90px;
  text-transform: uppercase;
  margin: 0;
  mix-blend-mode: difference;
  font-weight: 800;
  width: fit-content;
  color: var(--dark);
}

.text:after {
  content: attr(data-text);
  mix-blend-mode: difference;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--light);
}

<div class="box">
  <div class="svgs">
    <div class="svg-container">
      <svg class="svg svg-1" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="red" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
    </div>
    <div class="svg-container">
      <svg class="svg svg-2" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="red" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
    </div>
  </div>
  <h1 class="text" data-text="Do reinvent the wheel">Do reinvent<br>the wheel</h1>
</div>