所謂漸變背景，就是這樣子的。下圖中就是一個典型的漸變效果，左邊淺右邊深。

在css3以前，如果要實(shí)現(xiàn)漸變背景效果，是不能夠用css直接寫的，以前都是用圖片來代替的。而css3中，是可以支持css直接寫漸變效果的。比如以上實(shí)現(xiàn)的代碼就是

background: linear-gradient(90deg,#b16eec 0%,#9157dc 100%);

是一則基礎(chǔ)典型的css線性漸變應(yīng)用，當(dāng)然在css3中除了線性漸變，還有徑向漸變、重復(fù)線性漸變、重復(fù)徑向漸變等。

典型徑向漸變效果如下：

典型重復(fù)線性漸變效果如下：

以上是對css3漸變的基本介紹，大家可以查看相關(guān)手冊資料了解詳細(xì)使用，以后有時間筆者可以分享詳細(xì)的應(yīng)用方法。接下來就是本文的主題了。

大家都知道在微信小程序中，cover-view組件是為了解決map、video等原生組件層級的問題。比如要在全屏的地圖組件上加一個按鈕之類的東西，就必須用到cover-view組件，因?yàn)樵谠M件中z-index是無效的。然而關(guān)于cover-view和view的差異還是有很多的，本文要講的就是其中的一個細(xì)節(jié)——不支持css3背景漸變屬性。

在小程序的cover-view組件中是不能用css3漸變相關(guān)屬性的，比如文章開頭的背景屬性中，使用linear-gradient實(shí)現(xiàn)線性漸變，在普通H5或者小程序view組件中是完全沒有問題的，然而在cover-view中是不能夠使用的，使用后的效果就是背景無效。

所以如果要在cover-view組件中使用漸變，我們可以用背景圖片或者cover-image組件引入圖片來代替。

其實(shí)，在小程序自帶的一些組件還是有很多坑的。比如z-index不僅不能控制map、video等原生組件的層級，也不能控制cover-view之間的層級，這個問題的差異在下一篇文章中我們來分享下。