双色文字 [英] 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屋!
查看全文