設(shè)計出了一個這樣的需求，需要有一個數(shù)字擁有正常的顏色，但當(dāng)鼠標放上去的時候要變成漸變色，大家都知道，css是沒有顏色漸變這個屬性的，只有背景顏色的漸變，這里有兩種實現(xiàn)方法。
1.讓設(shè)計把字給你摳出來
這里扣圖片對于瀏覽器的兼容性非常好，會兼容基本上所有瀏覽器，圖片可以任意大小，但要求底色與div盒子中底色一致，這樣視覺上不會有問題，而我們可以直接改變圖片所屬div的背景顏色，就能實現(xiàn)通過背景顏色和圖片實現(xiàn)字體顏色的漸變了。
但是由于是圖片且底色固定，首先如果需要碰到底色頻繁變化的會很麻煩，其次關(guān)于數(shù)量的問題，大數(shù)量的扣字體圖片也是對設(shè)計師耐心的考驗，如果各位前端小伙伴不怕被刀可以去試試，另外，對于靜態(tài)頁面而言，大量的加載圖片也是會對性能的有影響，所以這里推薦第二種方法。
2.通過-webkit-text-fill-color: transparent;
這里主要用兩種屬性：
-webkit-background-clip: text;意思是，以盒子內(nèi)的文字作為裁剪區(qū)域向外裁剪，文字之外的區(qū)域都將被裁剪掉。
-webkit-text-fill-color: transparent;強制給文字設(shè)置顏色，不受其他樣式干擾
這里是webkit內(nèi)核瀏覽器擁有的css，比如谷歌和edge瀏覽器都是使用的這個。
相信大家都看到了以上兩種屬性，他們分別是裁剪出文本與強制把文本設(shè)置成透明，這樣我們也可使用background-color來進行變換顏色。
最后由于background并不是所有的屬性都支持transition過渡的，很遺憾，背景漸變就在其中之列，也就是說背景顏色的漸變無法通過顏色緩慢變化達到一種連貫的效果，所以只能通過套div利用透明度手寫過渡了。
