有两种颜色的文字

Question

我希望有一个文本可以在某个点x切换颜色.我提供了一个使用文本两次产生结果的示例,开关为45px.有没有办法在没有文本两次的情况下在css中执行此操作？也许使用svg？

div{
  width: 400px;
  height: 40px;
  border: 1px solid #000;
  position: relative;
}
div>span{
  position: absolute;
  top: 0;
  left: 0;
}

div :nth-child(2){
  color: blue;
  clip: rect(0 200px 40px 45px);
}
div :nth-child(1){
  color: red;
  clip: rect(0 45px 40px 0);
}

<div>
<span>Some bicolored Text</span>
<span>Some bicolored Text</span>
</div>

Answer 1

您可以使用:before和:after伪类:

div {
  width: 400px;
  height: 40px;
  border: 1px solid #000;
  position: relative;
}

div:before,
div:after {
  content:attr(data-text);
}

div:after{
  position: absolute;
  top: 0;
  left: 0;
}

div:after {
  color: blue;
  clip: rect(0 200px 40px 45px);
}

div:before {
  color: red;
  clip: rect(0 45px 40px 0);
}

<div data-text="Some bicolored Text">
</div>

Answer 2

在Webkit中,我们只有-webkit-background-clip:text属性/值.

body {
  text-align: center;
}
h1 {
  display: inline-block;
  font-size: 36px;
  background: linear-gradient(to right, red 0%, red 50%, blue 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>LONG HEADING TEXT</h1>

Answer 3

您可以使用伪元素.它会让你

• 改变字母中间的颜色
• 保持显示内容的语义
• 防止语义重复内容

h1{
  position:relative;
  text-transform:uppercase;
  color:#000;
}
h1:before{
  content: attr(data-content);
  position:absolute;
  top:0; left:0;
  width:2.2em;
  overflow:hidden;
  color:#ccc;
}

<h1 data-content="Bicolor">Bicolor<h1>

输出:

请注意,该clip属性已被弃用.在这个例子中,我使用overflow属性代替相同的结果.

Answer 4

另一种可能的选择是使用SVG.您可以使用渐变在SVG中创建多色文本.如果两个相邻的渐变色块位于相同的位置,那么您将在颜色之间获得明显的过渡.如果两个相邻的渐变停止位于不同的位置,那么您将在颜色之间获得平滑过渡.你可以拥有任意数量的色块.例如...

<svg width="200" height="80" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="bicolored">
            <stop offset="33%" stop-color="red"/>
            <stop offset="33%" stop-color="blue"/>
        </linearGradient>
        <linearGradient id="tricolored">
            <stop offset="33%" stop-color="red"/>
            <stop offset="33%" stop-color="green"/>
            <stop offset="66%" stop-color="green"/>
            <stop offset="66%" stop-color="blue"/>
        </linearGradient>
        <linearGradient id="smooth">
            <stop offset="33%" stop-color="red"/>
            <stop offset="66%" stop-color="blue"/>
        </linearGradient>
    </defs>
    <text x="0" y="20" fill="url(#bicolored)">Some bicolored Text</text>
    <text x="0" y="40" fill="url(#tricolored)">Some tricolored Text</text>
    <text x="0" y="60" fill="url(#smooth)">Some smooth gradient Text</text>
</svg>

请注意,在SVG中,颜色停止位于相对位置(例如0到1,0%到100%).如果您尝试将颜色停留在特定像素位置,这可能会使其变得有点困难.

请注意,在SVG中,您必须手动将文本元素放在svg元素中.

Answer 5

得到它了!从答案中混合了一些东西来得到这个:

div{
  border: 1px solid #000;
  position: relative;
  display: inline-block;
}
div>span{
  color: rgba(0, 0, 0, 0);
  z-index: 3;
}

div:before, div:after{
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
div:before{
  color: blue;
  clip: rect(0 200px 40px 45px);
  z-index: 1;
}
div:after{
  color: red;
  clip: rect(0 45px 40px 0);
  z-index: 2;
}

<div data-content="Some bicolored Text">
    <span>Some bicolored Text</span>
</div>

为部分解决方案提出了所有答案.