如何根据背景反转笔划文本颜色 [英] How to invert stroke text color depending on background

问题描述

我每个都有2个div，宽度为50％.有一个巨大的标头h1，应具有这两个div的颜色.我尝试了混合混合模式，但设置为差异时会给我一些随机的颜色.我的目标是反转颜色，但保持div的颜色.这是一个Codepen文件，我尝试使其尽可能简单: https://codepen.io/lukagurovic/pen/MLoZmj 在此示例中，最终效果应该看起来像这样:

I have 2 divs 50% width each. There is a huge header h1 which should have the color of these two divs. I have tried mix-blend-mode but it gives me some random colors when set to difference. My goal is to invert the colors but to keep the colors of the divs. This is a codepen file, I have tried to keep it as simple as possible: https://codepen.io/lukagurovic/pen/MLoZmj The final effect is supposed to look like on in this example:

https://jsfiddle.net/1uubdtz6/

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

but I am not sure why doesn't it work with these colors. Also, these divs are interactive so the color has to change dynamicly as divs are increasing in width when hovered, and there should be only stroke of text without any fill

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>

推荐答案

一个想法是复制文本并使用CSS变量定义颜色，以便您可以轻松地在一处更改它们.我使用了剪切路径来隐藏一个文本的一半，然后显示另一半:

One idea is to duplicate the text and use CSS variable to define the color so you can easily change them in one place. I used clip-path to hide half of one text and show the other half:

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>

这篇关于如何根据背景反转笔划文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！