Двухцветный текст

Question

есть ли способ добиться эффекта в приведенном ниже примере, без дублирования контента, просто используя html и css?

Таким образом, у вас в основном есть текст color1 и background1 с одной стороны и color2 плюс background2на другой стороне?

Пример кода для копирования:

<div style="width: 50%; background-color: black; overflow: hidden; height: 300px;display: inline-block;">
    <p style="width: 200%; color: white">
    I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do the same effect without duplicated content? I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do the same effect without duplicated content?
    </p>
    </div><div style="width: 50%; background-color: white; overflow: hidden; height: 300px;display: inline-block;">
    <p style="width: 200%; color: black; transform: translateX(-50%)">
    I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do the same effect without duplicated content? I am multicolor text. Multicolor text i am. This really does feel great. However, to get this, i need duplicated content. Is there a css way to do the same effect without duplicated content?
    </p>
    </div>

Answer 1

Вы также можете использовать background-clip:text, чтобы закрасить текст градиентом, и вы можете легко получить любую комбинацию цвета:

#main {
  background: linear-gradient(to right, red 50%, #fff 50%);
}

#main>p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color:transparent;
}

<div id="main">
  <p>I am multicolor text. Multicolor text i am. This really does feel great. No duplicated content was needed for this effect. It's created by using blending effects. I am multicolor text. Multicolor text i am. This really does feel great. No duplicated
    content was needed for this effect. It's created by using blending effects.</p>
</div>

Answer 2

Да, установив для свойства CSS mix-blend-mode значение difference.(Я также привел пример того, как вы можете создать это фоновое изображение без transform.)

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

#main {
  background: linear-gradient(to right, #000 50%, #fff 50%);
}

#main > p {
  color: #fff;
  mix-blend-mode: difference;
}

<div id="main">
<p>I am multicolor text. Multicolor text i am. This really does feel great. No duplicated content was needed for this effect. It's created by using blending effects. I am multicolor text. Multicolor text i am. This really does feel great. No duplicated content was needed for this effect. It's created by using blending effects.</p>
</div>