根据背景显示文本颜色

Question

我想要的东西很简单，但我没有在互联网上找到我真正想要的东西。

具有以下图像：

我想做的是文本不对称。TEXT（以及 W 的那部分）为白色，ITH 为蓝色，与灵感部分相同（INSPIR 为白色，ATION 为深蓝色）。

到目前为止我所做的（顺便说一句，我没想到会这么容易）：

.welcome-page-wrapper {

  width: 100%;

  height: 100%;

  display: flex;

  flex-flow: row wrap;

  position: relative;

}

.col-md-6 {

  display: flex;

  width: 100%;

}

.text {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

  z-index: 1;

}

#first-half {

  background-color: #3A5082;

  color: #F5F9FF;

}

#second-half {

  background-color: #F5F9FF;

  color: #3A5082;

}

我认为这应该用js或者scss来实现？老实说，我不知道，所以非常感谢任何帮助。

PS：这个东西应该非常敏感，所以使用跨度或类似的东西不是一个选择。

Answer 1

你可以研究mix-blend-modeCSS属性。这里我只是分享了一个例子。您应该深入了解混合。.container {  position: relative;  width: 400px;}.wrapper {  display: flex;  }.left {  background: #463c84;  height: 100vh;  width: 50%;}.right {  background: white;  width: 50%;}.header {  flex: 1;  position: absolute;  top: 20%;  left: 21%;  background: inherit;}.header h1 {  color: #fff;  mix-blend-mode: difference;}<div class="container">  <div class="wrapper">    <div class="left"></div>    <div class="right"></div>  </div>  <div class="header">    <h1 class="blend">TEXT WITH INPIRATION</h1>  </div></div>

Answer 2

您还可以使用background渐变和background-clip. 自定义 CSS var（可以方便地为可重用的代码设置这些颜色：例子with a filter hue-rotate to show different colors:root {/* set both gradient colors&nbsp; */&nbsp; --color1: #453C84;&nbsp; --color2: #ffffff;&nbsp; /* color to use where background-clip is involved */&nbsp; --blend: transparent;}body {&nbsp; margin: 0;}.split-colors {&nbsp; height: 100vh;&nbsp; display: flex;&nbsp; background: linear-gradient(to right, var(--color1) 50%, var(--color2) 50%);}h1 {&nbsp; margin: auto;&nbsp; background: linear-gradient(to right, var(--color2) 50%, var(--color1) 50%);&nbsp; color: var(--blend);&nbsp; background-clip: text;}html {&nbsp; background: white;&nbsp; animation: hue-rotate 5s infinite;}@keyframes hue-rotate {&nbsp; 50%{&nbsp; &nbsp; filter: hue-rotate(180deg)&nbsp; }}<div class="split-colors">&nbsp; <h1>TEXT WITH<br> INSPIRATION</h1></div>