html - 双色文字

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>