черно-белый текст на основе фонового изображения с css

Question

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

- это css, использованный в этом примере, который работает только потому, что изображение имеет solid черный фон:

.text {
  position: relative;
  color: rgb(255, 255, 255);
  mix-blend-mode: difference;
  text-transform: uppercase;
  font-size: 60px;
}

это не работает, если фоновое изображение не имеет solid черного фона:

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

я пытался css filter, mix-blend-modes s, clip-path s, я видел это https://aerolab.github.io/midnight.js/ (это не подходит для моего случая), но я всегда получаю неправильный результат. Знаете ли вы, как сделать черно-белый цветной текст, который распознает белый фон и делает текст черным, а другой - не solid белым фоном, поменяйте цвет на белый?

я надеюсь мое объяснение было ясным, любые решения или даже подсказки очень приветствуются, даже если для этого нужно javascript. спасибо!

это кодовая ручка с примерами: https://codepen.io/vlrprbttst/pen/jOPMzvd?editors=1100

большое спасибо!

Answer 1

Я попробовал что-то, что, кажется, работает.

Я добавил один черный слой (rgba с альфа-0,8) поверх вашего изображения с такой же шириной, затем отфильтровал яркость вашего изображения с помощью filter: brightness(3);

Я не уверен, что это отображает изображение так, как вы хотите.

body {
	 margin: 0;
	 padding: 0;
}
header.second {
	 height: 609px;
	 background-image: url("https://thedefiant.net/wp-content/uploads/2019/10/22520100_1600239116694701_7307954682775296386_o.jpg");
	 filter: brightness(3);
	 background-position: center left;
	 background-repeat: no-repeat;
	 background-size: 600px 100%;
	 background-color: #fff;
	 border: 1px solid red;
	 display: flex;
	 align-items: center;
	 padding-left: 390px;
	 position: relative;
}
header.second .mask {
	 position: absolute;
	 left: 0;
	 top: 0;
	 background-color: rgba(0, 0, 0, 0.8);
	 width: 600px;
	 height: 100%;
}
header.second .text {
	 position: relative;
	 color: white;
	 mix-blend-mode: difference;
	 text-transform: uppercase;
	 font-size: 60px;
}
 

<header class="second">
  <div class="mask"></div>
  <div>
    <div class="text" data-title="Sono caduto, ho pianto.">
      Sono caduto, ho pianto.
    </div>
  
    <div class="text" data-title="poi sono risalito">
      poi sono risalito
    </div>
  
    <div class="text" data-title="sei mejo te!">
      sei mejo te! sei mejo te!
    </div>
  </div>
</header>

Answer 2

Вы можете рассмотреть градиентную окраску текста, но вам нужно знать размер изображения, чтобы исправить заданные значения.

Вот пример только с первым разделом:

body {
  margin: 0;
  padding: 0;
}

header {
  height: 609px;
  background: 
   url("http://resources.doing.com/aaa/a.png") center right/auto 100% no-repeat;
  background-color: #fff;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 90px;
}

header>div {
  background: linear-gradient(to right, black calc(100% - 880px), white 0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text {
  text-transform: uppercase;
  font-size: 60px;
}

<header>
  <div>
    <div class="text" data-title="Elisa di Francisca">
      Elisa di Francisca
    </div>

    <div class="text" data-title="tenacia e determinazione">
      tenacia e determinazione
    </div>

    <div class="text" data-title="di una mamma in pedana">
      di una mamma in pedana
    </div>
  </div>
</header>