Разница между режимами смешивания и смешивания не работает должным образом

Question

У меня черный текст перекрывает черный div - я хочу сделать часть текста, которая перекрывается, белой. Поэтому я попытался использовать mix-blend-mode, но он не работает. Как так?

Быстрая демонстрация:

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: black;
    font-size: 9rem;
    mix-blend-mode: difference;
    z-index: 1;
  }

  .centered-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(calc(-50% - 10vh)) translateX(-50%);
    width: 22.5rem;
    height: 30rem;
    background-color: black;
  }

<h1>This<br/>is a<br/>test</h1>
<div class="centered-block"/>

Answer 1

Вы не можете использовать смешанный режим наложения с черным текстом.

Если у вас белый фон, он отображается как rgb (255,255,255). Если ваш текст черный, у вас будет цвет rgb (0,0,0), поэтому, если каждый столбец (цвет) вычтен, и вы получите абсолютное значение, вы получите rgb (255,255,255), поэтому текст все равно будет белый на белом. Если ваш текст имеет белый цвет rgb (255,255,255), и вы вычитаете rgb (0,0,0) и получаете абсолютное значение, вы получаете черное на белом. Если ваш фон был черным rgb (0,0,0), а текст был белым rgb (255,255,255), вы получите белый текст. Если ваш текст был черным rgb (0,0,0), а ваш фон также был черным rgb (0,0,0), разница будет rgb (0,0,0), поэтому черный над черным (это ваш пример).

Простой ответ, сделайте свой color: white; в h1. Также вам нужно установить цвет фона вашего тела, чтобы ваш текст отличался от другого, пока он ни на что не накладывался (например, как у вас все еще есть черный текст в вашем примере, когда он над белым, это не из-за смешанного режима наложения, это потому, что ему не с чем смешиваться.) поэтому добейтесь этого:

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: white;
    font-size: 9rem;
    mix-blend-mode: difference;
    z-index: 1;
  }

  .centered-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(calc(-50% - 10vh)) translateX(-50%);
    width: 22.5rem;
    height: 30rem;
    background-color: black;
  }
  
  body {
  background-color: white;
  }

<h1>This<br/>is a<br/>test</h1>
<div class="centered-block"/>