微信小程序cover-view组件不支持css3背景渐变方法

2019-08-28 10:42 栏目:技术开发 查看(1552)

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

微信截图_20190828101800

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

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

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

典型径向渐变效果如下:

gradient_radial

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

微信截图_20190828103449

以上是对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之间的层级,这个问题的差异在下一篇文章中我们来分享下。

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:微信小程序cover-view组件不支持css3背景渐变方法 - 微构网络
分享: