Văn bản có hai màu

Question

Tôi muốn có văn bản chuyển màu của nó tại một điểm nhất định x. Tôi đã cung cấp một mẫu sử dụng văn bản hai lần để tạo ra kết quả, với công tắc ở 45px. Có cách nào để làm điều này trong css mà không có văn bản hai lần? Có thể sử dụng 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

Một tùy chọn khác có thể là sử dụng SVG. Bạn có thể tạo văn bản nhiều màu trong SVG bằng cách sử dụng gradient. Nếu hai điểm dừng liền kề nằm ở cùng một vị trí thì bạn sẽ nhận được sự chuyển tiếp rõ nét giữa các màu. Nếu hai điểm dừng liền kề nằm ở các vị trí khác nhau thì bạn sẽ nhận được sự chuyển tiếp suôn sẻ giữa các màu. Bạn có thể có nhiều điểm dừng màu tùy thích. Ví dụ ...

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

Lưu ý rằng trong SVG, dừng màu ở vị trí tương đối (ví dụ: 0 đến 1, 0% đến 100%). Điều này có thể làm cho nó hơi khó khăn nếu bạn đang cố gắng đặt màu dừng tại các vị trí pixel cụ thể.

Lưu ý rằng trong SVG, bạn phải định vị thủ công phần tử văn bản trong phần tử svg.

Answer 2

Bạn có thể sử dụng :before và :after giả lớp:

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

Bạn có thể sử dụng một yếu tố giả cho việc này. Nó sẽ cho phép bạn

• thay đổi màu sắc ở giữa thư
• giữ ngữ nghĩa của nội dung hiển thị
• ngăn chặn nội dung trùng lặp ngữ nghĩa

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>

đầu ra:

Lưu ý rằng clip tài sản has been deprecated. Trong ví dụ này, tôi đã sử dụng thuộc tính tràn thay cho cùng một kết quả.

Answer 4

Chỉ trong Webkit chúng tôi có thuộc tính/giá trị -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! Trộn một vài điều từ câu trả lời với nhau để có được điều này:

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 tất cả các câu trả lời cho các giải pháp phần.

Answer 6

Nếu bạn muốn định kích thước tuyệt đối, bạn có thể thực hiện việc này trong SVG bằng bộ lọc.

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