双色文本 [英] Dual-Color Text
本文介绍了双色文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有没有办法实现下面示例中的效果,不复制内容,只用html和css?
所以你基本上有一个文本,一侧是 color1 和 background1,另一侧是 color2 和 background2?
要复制的示例代码:
<div style="width: 50%; background-color: black; overflow: hidden; height: 300px;display: inline-块;"><p style="宽度:200%;颜色:白色">我是多色文本.多色文本我.这种感觉真的很棒.然而,为了得到这个,我需要重复的内容.有没有一种 css 方法可以在没有重复内容的情况下实现相同的效果?我是多色文本.多色文本我.这种感觉真的很棒.然而,为了得到这个,我需要重复的内容.有没有一种 css 方法可以在没有重复内容的情况下实现相同的效果?</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%)">我是多色文本.多色文本我.这种感觉真的很棒.然而,为了得到这个,我需要重复的内容.有没有一种 css 方法可以在没有重复内容的情况下实现相同的效果?我是多色文本.多色文本我.这种感觉真的很棒.然而,为了得到这个,我需要重复的内容.有没有一种 css 方法可以在没有重复内容的情况下实现相同的效果?</p>
解决方案
您还可以使用 background-clip:text
为文本添加渐变色,并且您可以轻松拥有任意颜色组合:
#main {背景:线性渐变(向右,红色 50%,#fff 50%);}#main>p {背景:线性渐变(向左,蓝色 50%,#fff 50%);显示:内联块;-webkit-background-clip:文本;背景剪辑:文本;-webkit-text-fill-color:透明;颜色:透明;}
<p>我是多色文本.多色文本我.这种感觉真的很棒.这种效果不需要重复的内容.它是通过使用混合效果创建的.我是多色文本.多色文本我.这种感觉真的很棒.没有重复这种效果需要内容.它是通过使用混合效果创建的.</p>
is there a way to achieve the effect in the sample below, without duplicating content, just using html and css?
So you basically have a Text that is color1 and background1 on one side and color2 plus background2 on the other side?
Example Code to copy:
<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>
解决方案
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屋!
查看全文