微信小程序用CSS设置背景颜色渐变

背景颜色的渐变：核心代码 -webkit-linear-gradient()

WXSS的代码：
.container{background-image: url(../../images/flower1.png);position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: -webkit-linear-gradient(top,white,lightblue,rgb(83, 201, 248));color: rgb(241, 161, 155);font-size: 18px;
}
.container text{display: block;margin: 40rpx;
}

top: 表示上下渐变，我们还可以设置为左右渐变（值为 left )

white: 是第一个颜色名

lightblue ：第二个颜色名

rgb(83, 201, 248) : 第三个颜色名（我们也可以设置两种颜色）
效果图

同样可以实现按钮的渐变：

/* border-radius: 98rpx;是控制按钮边变圆 */
.goodbutton {margin-top: 30px;width: 70%;background: -webkit-linear-gradient(left,pink,lightblue,skyblue);color: white;border-radius: 98rpx;background: bg_red;
}

微信小程序用CSS设置背景颜色渐变相关推荐

uniapp 微信小程序导航栏设置背景颜色字体颜色
{"path": "pages/company","style":{"navigationBarTitleText": ...
【微信小程序】background-image设置背景图片
微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片: base64图片设置步骤如下:1.在转base64工具(自己百度下base64编码转换工具) ...
微信小程序：更改页面背景颜色
微信小程序的页面背景色默认是白色,但可以自主更改. 如果想所有页面的背景色都同时一种颜色,只需在app.wass里修改,如果想每个页面的背景色都不一样,则需要在每个页面对应的.wass文件里修改. 一 ...
css设置背景颜色渐变
对角线渐变: background: linear-gradient(to top right, #f6f5f0, #fefefd); 如果有多个颜色渐变,颜色的参数可以有多个: background ...
CSS设置背景颜色拼接 (一半黑一半白) 条纹渐变
CSS设置背景颜色拼接 (一半黑一半白) 条纹渐变首先下面是用到的css样式线性渐变这个属性我还说不明白我就简单的使用一下有兴趣的搜索CSS线性渐变就OK background-imag ...
微信小程序纯css实现刻度尺
微信小程序纯css实现刻度尺最近需要实现一个高度定制的刻度尺,但是网上现成的方案却是极少,最终找到了HaoTian的wx-scale.但是没有实现竖向的效果而且刻度范围大时,在安卓机上无法渲染完全( ...
php设置背景为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...

微信小程序用CSS设置背景颜色渐变

微信小程序用CSS设置背景颜色渐变相关推荐

最新文章

热门文章