Блог

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

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

Я использовал CSS mix-blend-mode exclusion .

Рабочий пример с черно-белым в настоящее время можно найти здесь . Моя цель — заменить черно-белую основную кнопку на сине-белую.

Если мы рассмотрим mix-blend-mode difference , это учитывает разницу между цветами фона и содержимого.

Итак, если у нас есть текст синего цвета, который rgb(0, 0, 255) должен стать белым, нам нужно его изменить rgb(255, 255, 0) .

И наоборот, если наш текст rgb(255, 255, 0) , и мы отличаем его от белого, который является rgb (255, 255, 255), мы получаем rgb(0, 0, 255) синий.

Итак, мы присваиваем тексту цвет rgb(255, 255, 0) и просим его смешаться с белым фоном, который даст нам синий. Затем, когда мы наложим синий, мы получим белый текст.

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

ОБНОВЛЕНИЕ: как видно из комментариев, результаты на данный момент в Windows10 и IOS выглядят нормально, но в MACOS наблюдаются переменные результаты: текст приобретает бледный цвет в Chrome и Safari, хотя в Firefox он белый. Различия в интерпретации (особенно между режимом смешивания и режимом смешивания фона) требуют дальнейшего изучения.

 body  {
  position: relative;
  background-color: rgb(255, 255, 255);
  width: 100vw;
  height: 100vh;
}

@keyframes updown {
  0% {
    height: 0;
    top: 200px;
  }
  50% {
    height: 200px;
    top: 0;
  }
  100% {
    height: 0;
    top: 200px;
  }
}
  
.background {
  position: absolute;
  background-color: rgb(0, 0, 255);
  width: 400px;
  height: 200px;
  animation: updown 10s ease infinite;
}

.text {
  position: absolute;
  font-family: sans-serif;
  width: 400px;
  color: rgb(255,255,0);/* complement of blue */
  mix-blend-mode: difference;
  text-align: center;
  font-size: 50px;
} 

 <div class="background"></div>
  <div class="text">Primary button</div>