這是我的小提琴，我想將文本顏色設定為背景顏色但反轉。
https://jsfiddle.net/6q34vf7o/16/
<div>
<span>Test</span>
</div>
div {
background: linear-gradient(to right, #fff, #000);
width: 100vh;
height: 50vh;
}
span{
font-size: 30vh;
}
我該怎么做？我知道有一個混合混合模式，但我不知道如何在這里使用它。
uj5u.com熱心網友回復：
您需要添加text-fill-color: transparentandbackground-clip: text以使漸變像background-image文本一樣作業。在背景行中，只需將“向右”更改為“向左”。
div {
background: linear-gradient(to right, #fff, #000);
}
span {
background-image: -webkit-linear-gradient(to left, #fff, #000);
background-image: linear-gradient(to left, #fff, #000);
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}<div style='width: 85vh; height: 35vh;'><span style='font-size: 30vh; font-family: Arial; font-weight: bold;'>TEST</span></div>uj5u.com熱心網友回復：
div {
background: linear-gradient(to right, #fff, #000);
width: 100vh;
height: 50vh;
}
span{
font-size: 30vh;
filter: invert(1);
}<div>
<span>Test</span>
</div>uj5u.com熱心網友回復：
div {
background: linear-gradient(to right, #fff, #000);
width: 100vh;
height: 50vh;
}
span {
font-size: 30vh;
mix-blend-mode: difference;
filter: invert(1);
}<div>
<span>Test</span>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/441409.html
標籤：css
上一篇：防止白色區域并使用100%高度