css - 如何根据背景反转笔触文本颜色

Question

我有 2 个 div，每个 50% 的宽度。有一个巨大的标题 h1 应该有这两个 div 的颜色。我尝试过混合混合模式，但是当设置为差异时它会给我一些随机颜色。我的目标是反转颜色但保持 div 的颜色。这是一个 codepen 文件，我试图让它尽可能简单：https ://codepen.io/lukagurovic/pen/MLoZmj 在这个例子中，最终效果应该是这样的：

https://jsfiddle.net/1uubdtz6/

但我不确定为什么它不适用于这些颜色。此外，这些 div 是交互式的，因此颜色必须随着 div 在悬停时宽度的增加而动态变化，并且应该只有文本的笔触而没有任何填充

body {
  height: 100vh;
  width: 100%;
  position: relative;
  background-color: #510035;
  margin: 0 auto;
}   

h1 {
  font-size: 4.7em;
  text-transform: uppercase;
}

.half-pager {
  width: 50%;
  height: 100%;
  position: absolute;
  display: inline-block;
  overflow: hidden;
  text-align: center;
}

.half-pager-dark {
  background-color: #510035;
}
.half-pager-light {
  right: 0;
  background-color: #E8E8E8;
  float: right;
}

.lp-header {
  position: absolute;
}
.lp-header {
  color:transparent;
  mix-blend-mode: difference;
  -webkit-text-stroke: 3px rgb(126, 124, 133); 
  z-index: 1;
}

.lp-header {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="box" class="half-pager half-pager-dark"></div>
<div id="box1" class="half-pager half-pager-light"></div>
<h1 class="lp-header">left or right</h1>

Answer 1

一种想法是复制文本并使用 CSS 变量来定义颜色，以便您可以在一个位置轻松更改它们。我使用剪辑路径隐藏一个文本的一半并显示另一半：

body {
  margin: 0;
  --c1:#510035;
  --c2:#E8E8E8;
}
body:hover {
  --c1:red;
  --c2:blue;
}

h1 {
  font-size: 4.7em;
  text-transform: uppercase;
  margin: 0;
}
.first {
  background:var(--c1);
  -webkit-text-stroke: 3px var(--c2);
}

.second {
  background:var(--c2);
  -webkit-text-stroke: 3px var(--c1);
  clip-path:polygon(0% 0%, 50% 0%, 50% 100%,0% 100%);
}

.lp-header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  min-height:100vh;
  box-sizing:border-box;
  color: transparent;
  z-index: 1;
  padding: 50px;
  text-align: center;
  transition:0.5s;
}

<h1 class="lp-header first">left or right</h1>
<h1 class="lp-header second">left or right</h1>