所谓渐变背景，就是这样子的。下图中就是一个典型的渐变效果，左边浅右边深。

在css3以前，如果要实现渐变背景效果，是不能够用css直接写的，以前都是用图片来代替的。而css3中，是可以支持css直接写渐变效果的。比如以上实现的代码就是

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

是一则基础典型的css线性渐变应用，当然在css3中除了线性渐变，还有径向渐变、重复线性渐变、重复径向渐变等。

典型径向渐变效果如下：

典型重复线性渐变效果如下：

以上是对css3渐变的基本介绍，大家可以查看相关手册资料了解详细使用，以后有时间笔者可以分享详细的应用方法。接下来就是本文的主题了。

大家都知道在微信小程序中，cover-view组件是为了解决map、video等原生组件层级的问题。比如要在全屏的地图组件上加一个按钮之类的东西，就必须用到cover-view组件，因为在原生组件中z-index是无效的。然而关于cover-view和view的差异还是有很多的，本文要讲的就是其中的一个细节——不支持css3背景渐变属性。

在小程序的cover-view组件中是不能用css3渐变相关属性的，比如文章开头的背景属性中，使用linear-gradient实现线性渐变，在普通H5或者小程序view组件中是完全没有问题的，然而在cover-view中是不能够使用的，使用后的效果就是背景无效。

所以如果要在cover-view组件中使用渐变，我们可以用背景图片或者cover-image组件引入图片来代替。

其实，在小程序自带的一些组件还是有很多坑的。比如z-index不仅不能控制map、video等原生组件的层级，也不能控制cover-view之间的层级，这个问题的差异在下一篇文章中我们来分享下。