css3 文字渐变透明 |jq点击移除css样式

.text{
background-image: linear-gradient(to right, #6dd5fa, #2980B9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

上述代码中，大家使用线性渐变实现了文字背景的颜色渐变，同时使用了-webkit-background-clip属性将渐变效果限制于文字，再加上-webkit-text-fill-color属性将文字颜色设为透明，从而达到文字渐变透明的效果。

除了线性渐变外，CSS3还支持径向渐变和重复渐变。具体实现方式和线性渐变类似。

.text{
background-image: radial-gradient(circle, #6dd5fa, #2980B9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.text{
background-image: repeating-linear-gradient(to right, #6dd5fa, #2980B9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

需要注意的是，因为渐变背景是通过background-image实现的，所以要确保文本内容的背景色与渐变背景颜色有一定的对比度，以确保文字的可读性。