Question

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

http://jsfiddle.net/1uubdtz6/

但是我不确定为什么不能使用这些颜色。另外，这些div是可交互的，因此当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>

如何根据背景反转笔划文本颜色

1 个答案: