设计出了一个这样的需求，需要有一个数字拥有正常的颜色，但当鼠标放上去的时候要变成渐变色，大家都知道，css是没有颜色渐变这个属性的，只有背景颜色的渐变，这里有两种实现方法。
1.让设计把字给你抠出来
这里扣图片对于浏览器的兼容性非常好，会兼容基本上所有浏览器，图片可以任意大小，但要求底色与div盒子中底色一致，这样视觉上不会有问题，而我们可以直接改变图片所属div的背景颜色，就能实现通过背景颜色和图片实现字体颜色的渐变了。
但是由于是图片且底色固定，首先如果需要碰到底色频繁变化的会很麻烦，其次关于数量的问题，大数量的扣字体图片也是对设计师耐心的考验，如果各位前端小伙伴不怕被刀可以去试试，另外，对于静态页面而言，大量的加载图片也是会对性能的有影响，所以这里推荐第二种方法。
2.通过-webkit-text-fill-color: transparent;
这里主要用两种属性：
-webkit-background-clip: text;意思是，以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。
-webkit-text-fill-color: transparent;强制给文字设置颜色，不受其他样式干扰
这里是webkit内核浏览器拥有的css，比如谷歌和edge浏览器都是使用的这个。
相信大家都看到了以上两种属性，他们分别是裁剪出文本与强制把文本设置成透明，这样我们也可使用background-color来进行变换颜色。
最后由于background并不是所有的属性都支持transition过渡的，很遗憾，背景渐变就在其中之列，也就是说背景颜色的渐变无法通过颜色缓慢变化达到一种连贯的效果，所以只能通过套div利用透明度手写过渡了。
