本文主要和大家介紹了詳解CSS背景漸變圖片transtion過渡效果技巧的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
一、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）：
相關程式碼如下：
<p class="box"></p>
##
.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前後效果比較：
##相關程式碼如下：
<p class="box"></p>
.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之後的效果：
相關程式碼如下：
<p class="box"></p>
.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;
}以上是CSS實現背景漸層圖片transtion轉場效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
