双色文字 [英] Dual-Color Text

问题描述

有没有一种方法可以在下面的示例中达到效果， 无需复制内容，仅使用html和CSS?

is there a way to achieve the effect in the sample below, without duplicating content, just using html and css?

因此，您基本上拥有一侧是color1和background1，另一侧是color2加background2的文本?

So you basically have a Text that is color1 and background1 on one side and color2 plus background2 on the other side?

要复制的示例代码:

<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>

推荐答案

您还可以使用background-clip:text使用渐变为文本着色，并且可以轻松地使用任何颜色组合:

You can also use background-clip:text to color the text with a gradient and you can easily have any combination of color:

#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>

这篇关于双色文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！