双色文字

Question

有没有一种方法可以在下面的示例中实现效果，而无需使用HTML和CSS来重复内容？

因此，您基本上拥有一侧是color1和background1，另一侧是color2 plus 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>