一、background-image不支持CSS3 transition
background-image 不支持CSS3 transition ，而CSS3 gradient漸變作為背景圖片存在的時候，下面的CSS設置是不會有過渡效果的。
.gradient { background-image: linear-gradient(to right, olive, green); transition: background-image 0.5s linear;}.gradient:hover { background-image: linear-gradient(to right, green, purple);}鼠標hover會發現漸變的變化是很唐突的，一點過渡效果也沒有。
下面問題來了，如果我們希望實現漸變hover時候有過渡變化的效果，該如何實現呢？我這里羅列的幾種可行的方法。
二、借助background-position實現漸變過渡
background-image 雖然不支持CSS3 transition 過渡，但是 background-position 支持啊，于是，通過控制背景位置，我們是可以實現漸變過渡效果的。
實現效果如下（鼠標hover）：
相關代碼如下：
<div class="box"></div>
.box { max-width: 400px; height: 200px; background: linear-gradient(to right, olive, green, purple); background-size: 200%; transition: background-position .5s; }.box:hover { background-position: 100% 0; }三、借助background-color實現漸變過渡
background-image 雖然不支持CSS3 transition 過渡，但是 background-color 支持啊，于是，通過控制背景顏色，和一個顏色呈現技巧，我們也是可以實現漸變過渡效果的。
鼠標hover前后效果對比：
相關代碼如下:
<div class="box"></div>
.box { max-width: 400px; height: 200px; background: olive linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,.5)); transition: background-color .5s; }.box:hover { background-color: purple; }四、借助偽元素和opacity實現漸變過渡
借助偽元素創建變換后的漸變效果，通過改變覆蓋的漸變的opacity透明度變化實現漸變過渡效果。
下圖為hover之后的效果：
相關代碼如下：
<div class="box"></div>
.box { max-width: 400px; height: 200px; background: linear-gradient(to right, olive, green); position: relative; z-index: 0; }.box::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(to right, green, purple); opacity: 0; transition: opacity .5s; z-index: -1;}.box:hover::before { opacity: 1; }五、結束語
以上就是我所知道的幾個方法，當然，肯定還有其他更好的實現，歡迎補充。希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
