Текст с двумя цветами

Я хотел бы иметь текст, который переключает его цвет в определенной точке x. Я предоставил образец, который дважды использует текст для получения результата, с переключателем на 45 пикселей. Есть ли способ сделать это в 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>

Ответ 1

Другой возможный вариант - использовать 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.

Ответ 2

Вы можете использовать псевдо-классы :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>

Ответ 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>

Ответ 4

В Webkit только свойство -webkit-background-clip:text имеет значение -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>

Ответ 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>

Ответ 6

Если вы хотите абсолютный размер, вы можете сделать это в SVG с помощью фильтра.

<svg x="0px" y="0px" width="800px" height="50px" viewBox="0 0 800 50">
  <defs>
    <filter id="bicolor">
      <feFlood x="0" y="0" width="800" height="50" flood-color="blue" result="blue-field"/>
      <feFlood x="50" y="0" width="750" height="50" flood-color="red" result="red-field"/>
      <feMerge>
        <feMergeNode in="blue-field"/>
        <feMergeNode in="red-field"/>
        </feMerge>
        <feComposite operator="in" in2="SourceGraphic"/>
      </filter>
    </defs>
      <text filter="url(#bicolor)" x="20" y="20" width="200" height="20">BICOLOR Text and stuff</text>
  </svg>