根据背景显示文本颜色

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  */

  --color1: #453C84;

  --color2: #ffffff;

  /* color to use where background-clip is involved */

  --blend: transparent;

}

body {

  margin: 0;

}

.split-colors {

  height: 100vh;

  display: flex;

  background: linear-gradient(to right, var(--color1) 50%, var(--color2) 50%);

}

h1 {

  margin: auto;

  background: linear-gradient(to right, var(--color2) 50%, var(--color1) 50%);

  color: var(--blend);

  background-clip: text;

}

html {

  background: white;

  animation: hue-rotate 5s infinite;

}

@keyframes hue-rotate {

  50%{

    filter: hue-rotate(180deg)

  }

}

<div class="split-colors">

  <h1>TEXT WITH<br> INSPIRATION</h1>

</div>