更改html中對角線漸變線兩側的文字顏色

Question

關於如何更改2部分漸變線的文字顏色的任何想法？例如，如果我希望文本的藍色部分（'s'，'o'和'm'的一部分）是黑色的？

.button{ 
    background: linear-gradient(140deg, #00C9FF 35%, transparent 35%); 
} 

Answer 1

你可以做到這一點包裹在<p>標籤的文本，設置linear-gradient這個標籤。

button{ 
 
    background: linear-gradient(140deg, #00C9FF 35%, transparent 35%); 
 
    color: white; 
 
    font-size: 30px; 
 
} 
 

 
p{ 
 
    margin: 0; 
 
    font-size: 50px; 
 
    background: -webkit-linear-gradient(130deg, red 65%, black 15%); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<button type="button"><p>some long text</p></button>