Tekst z dwoma kolorami

Question

Chciałbym mieć tekst, który zmienia kolor na określony punkt x. Podałem próbkę, która używa tekstu dwa razy, aby uzyskać wynik, z przełącznikiem przy 45 pikseli. Czy istnieje sposób, aby to zrobić w css bez dwóch tekstów? Może używając 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

Inną możliwą opcją jest użycie SVG. Możesz tworzyć wielobarwne teksty w SVG za pomocą gradientów. Jeśli dwa sąsiednie przystanki gradientowe znajdują się w tej samej pozycji, uzyskasz ostre przejście między kolorami. Jeśli dwa sąsiednie przystanki gradientowe znajdują się w różnych pozycjach, uzyskasz płynne przejście między kolorami. Możesz mieć tyle postojów koloru, ile chcesz. Na przykład ...

<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> 

Należy zauważyć, że w SVG ograniczniki kolorów są w pozycjach (na przykład od 0 do 1, od 0% do 100%). Może to sprawić, że będzie trochę trudniej, jeśli próbujesz umieścić kolory zatrzymane w określonych lokalizacjach pikseli.

Należy zauważyć, że w SVG należy ręcznie ustawić element tekstowy w elemencie svg.

Answer 2

Można użyć :before i :after pseudo klasy:

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 3

Można użyć do tego elementu pseudo. Pozwoli to na

• zmienić kolor w środku pisma
• zachować semantykę treści wyświetlane
• zapobiec semantyczny duplikaty

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>

moc wyjściowa:

Zauważ, że clip nieruchomość has been deprecated. W tym przykładzie użyłem właściwości przepełnienia zamiast tego samego wyniku.

Answer 4

Tylko w Webkit mamy właściwość/wartość -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 5

Got it! Mieszane kilka rzeczy razem z odpowiedziami, aby uzyskać w ten sposób:

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>

Upvoted wszystkie odpowiedzi do częściowych rozwiązań.

Answer 6

Jeśli chcesz bezwzględnego rozmiaru, możesz to zrobić w SVG przy użyciu filtra.

<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>