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

Question

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

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

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

Answer 1

Вот еще одна идея, использующая больше поддерживаемых функций, чем 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>

Мы можем ввести другую переменную для управления перекосом:

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

<div class="box" style="--text:'Lorem Ipsum'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum';--p:70%;--s:45deg">
<span></span>
</div>

Мы также можем рассмотреть многострочный текст:

:root {
  --c1:#adf175;
  --c2:#f3f3f3;
}
.box {
  font-size: 20px;
  font-family: Verdana, sans-serif;
  color:var(--c1);
  background-color:var(--c2);
  padding:20px;
  position:relative;
  display:inline-block;
  overflow:hidden;
  --w:140px;
  width:var(--w); /*we fix the width to have multiple lines*/
}
.box:before {
  content:var(--text);
}
.box span {
  position:absolute;
  top:0;
  left:-50px;
  right:var(--p,50%);
  bottom:0;
  padding:inherit;
  color:var(--c2);
  background-color:var(--c1);
  overflow:hidden;
  transform:skew(var(--s,15deg));
}
.box span:before{
  content:var(--text);
  width:var(--w); /* we use the same width as the box*/
  display:inline-block;
  margin-left:50px; /*Same value as left on the span*/
  transform:skew(calc(-1 * var(--s,15deg)));
}

<div class="box" style="--text:'Lorem Ipsum dolert text'">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:20%;--s:-30deg">
<span></span>
</div>
<div class="box" style="--text:'Lorem Ipsum dolert text';--p:40%;--s:45deg">
<span></span>
</div>

Answer 2

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

Но если у вас есть свобода применения градиента к тексту 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.

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

• https://css -tricks.com / альманах / свойства / б / фон-клип / * * тысяча двадцать-одна
• Разница между "-webkit-text-fill-color" и "color"?

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>

Внимание : background-clip:text - экспериментальная технология

Answer 3

Так что это можно сделать с помощью 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>

Это решение включает в себя поворот результата и расширение последнего слова, чтобы соответствовать (как выглядит ваш пример изображения) - я также включил нерасширенную версию.

Answer 4

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

Режимы смешивания: фиксированные формулы , которые вы можете использовать творчески. Они смешивают два перекрывающихся изображения (визуальные изображения) вместе. Таким образом, параметры - это два наложенных пикселя, ничего больше.

Но вы можете создать такой эффект с помощью небольшой помощи #clippath, #svg, #javascript или тому подобного. Смотрите этот сайт, например: https://mathieulevesque.com/en Я думаю, они удвоили текст и дали ему два разных вида.

Я только что создал быстрый прототип. Вы можете играть с. Надеюсь, это поможет.

Если вы хотите использовать чистый код, вы можете создать второй div с помощью javascript.

Этот инструмент может помочь вам поиграть с фигурами.