Разделение цвета текста с помощью CSS по сравнению с фоном

Я пытаюсь добиться следующего, но действительно борюсь. Я просто пытаюсь добиться диагонального фона, который просматривает текст и меняет цвет по своему выбору.

Я пробовал использовать css mixed-blend-mode, однако он просто контрастирует с моими цветами, а не с возможностью разделить на два разных цвета.

* {
  margin: 0;
  padding: 0
}

header {
  overflow: hidden;
  height: 100vh;
  background-color: #FFF;
  background-image: -webkit-linear-gradient(30deg, #FFF 50%, #adf175 50%);
  min-height: 500px;
}

h2 {
  color: white;
  font: 900 35vmin/35vh cookie, cursive;
  text-align: center;
  position: fixed;
  top: 0px;
  left: 20px;
  mix-blend-mode: difference;
}

h2:after {
  color: white;
  mix-blend-mode: difference;
}

<header>
  <h2>On A Mission</h2>
</header>

Ответы

Ответ 1

Отсечение является отличным решением.

Но если у вас есть свобода применения градиента к тексту h2, то это можно сделать с помощью небольшого переключателя.

h2 {
  background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

По сути, к текстовому элементу применяется linear-gradient фон, в данном случае h2, и используется свойство background-clip чтобы обрезать фон и распространяться только на текст. Наконец, используйте text-fill-color чтобы установить цвет h2 прозрачным

Я только что поменял цвета градиента из вопроса выше для h2 и div.

Больше информации можно увидеть здесь

body {
  font-size: 16px;
  font-family: Verdana, sans-serif;
}

.wrap {
  width: 50%;
  margin: 0 auto;
  border: 1px solid #ccc;
  text-align: center;
  background: linear-gradient(30deg, #FFF 50%, #adf175 50%);
}

h2 {
  background: linear-gradient(30deg, #adf175 50%, #FFF 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="wrap">
  <h2>Hello World</h2>
</div>

Ответ 2

* {
  margin: 0;
  padding: 0
}

header {
  position: relative;
  height: 100vh;
  min-height: 500px;
  font: 900 35vmin/35vh cookie, cursive;
  text-align: center;
  color: #adf175;
}

header > div {
  min-height: 100%;
}

.foreground {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #adf175;
  color: white;
  clip-path: polygon(30% 0, 100% 100%, 100% 0);
}

h2 {
  position: fixed;
}

<header>
    <div>
        <h2>On A Mission</h2>
    </div>
    <div class="foreground">
        <h2>On A Mission</h2>
    </div>
</header>

Ответ 3

Вот еще одна идея, использующая больше поддерживаемых функций, чем clip-path и background-clip:text. Идея состоит в том, чтобы полагаться на перекос трансформации и некоторые скрытые переполнения.

Я использовал CSS-переменные для большей гибкости, но их легко можно опустить, если нам понадобится поддержка старого браузера.

:root {
  --c1:#adf175;
  --c2:#f3f3f3;
}

.box {
  font-size: 20px;
  font-family: Verdana, sans-serif;
  color:var(--c1);
  background:var(--c2);
  padding:20px;
  position:relative;
  display:inline-block;
  overflow:hidden;
}
.box:before {
  content:var(--text);
}
.box span {
  position:absolute;
  top:0;
  left:-20px;
  right:var(--p,50%);
  bottom:0;
  padding:inherit;
  background:var(--c1);
  color:var(--c2);
  white-space:nowrap;
  overflow:hidden;
  transform:skew(15deg);
}
.box span:before{
  content:var(--text);
  display:inline-block;
  margin-left:20px; /*Same value as left on the span*/
  transform:skew(-15deg); /*same value as the skew on the span*/
}

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:80%">
<span></span>
</div>

Ответ 4

Так что это можно сделать с помощью background-clip: text - хотя это не поддерживается повсеместно, оно работает в последних версиях Chrome, Firefox и Edge:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.rotate {
  border: 1px solid #ddd;
  text-align: center;
  background: linear-gradient(75deg, #adf175 50%, transparent 50%);
  transform: rotate(-90deg);
}

.text {
  font-family: arial, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  padding: 5px;
  margin: 0;
  text-transform: uppercase;
  background: linear-gradient(75deg, #fff 50%, #adf175 50%);
  color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
}

.fit-text {
  font-size: 2.25rem;
}

<div class="container">

  <div class="rotate">
    <div class="text">we are on a
      <div class="fit-text">mission</div>
    </div>
  </div>

  <div class="rotate">
    <div class="text">we are on a<br/>mission</div>
  </div>
</div>