微信小程序中这么简单的设置页面背景图及字体颜色的方法，你还不会？

在微信小程序中，我们不免的要设置背景图片和字体颜色。
那怎么样才能做到简单的设置背景图片和字体颜色呢？
话不多说，直接开讲
首先先说怎么设置页面背景图片：

这是博主准备的照片。
下面是在wxml中的代码

<!--pages/test.wxml-->
<view class='test'><view class="temp">随便写一下</view><view class="tmp">这里也算是</view><image class='mytest'  src='/images/804451430.jpeg'></image>
</view>

在微信开发文档中，定义image组件的src属性后跟着的是图片资源地址，在博主的代码中**“/images/804451430.jpeg”**是图片资源地址。

然后在wxss中设置背景图片的布局。

.mytest{position: absolute;top:40rpx;left:40rpx;width:100%;height:100%;z-index:-1;
}

这就是怎么设置页面背景图的方法。

接下来讲一下怎么设置字体的颜色。
在wxss中讲你要设置的字体的布局中加上color属性

.temp{text-align: center;font-size: 50rpx;line-height:2;opacity: 0.8;color: brown;
}
.tmp{text-align:center;font-size:50rpx;line-height:2;opacity:0.65;color: brown;
}

在这里博主设置的颜色为brown。

下面就是效果图

如果博主写的地方有错误了，欢迎评论区的大佬指出来。
如果觉得写的还行的话，来个三连（点赞，收藏，关注）啊，大佬们

微信小程序中这么简单的设置页面背景图及字体颜色的方法，你还不会？相关推荐

微信小程序中全局变量userInfo在其它页面不可用（wx.getUserInfo为异步获取信息）
app.js中获取用户的openid和userinfo,并存储为全局变量,当在index中调用getApp().globalData.userInfo时却返回为空值: getUserInfo: fun ...
MATLAB slider中的数值,在微信小程序中如何使用slider设置数据值
这篇文章主要介绍了微信小程序使用slider设置数据值及switch开关组件功能,结合实例形式分析了slider组件及switch组件的功能与使用方法,并附带源码供读者下载参考,需要的朋友可以参考下 ...
微信小程序中实现简单Demo（两数之和）
一.安装微信小程序开发者工具打开微信小程序官网的开发者文档https://developers.weixin.qq.com/miniprogram/dev/,按照流程安装微信小程序开发者工具二 ...
微信小程序中嵌套html_微信小程序中使用 web-view 内嵌 H5 时，登录问题的处理方法...
在微信小程序的开发中,经常遇到需要使用内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎样与H5中的登录状态保持一致? 一般来说,后端开发同事多数会要求我们 ...
微信小程序中内嵌一个h5页面
1.写好要嵌入的html页面 PS:我是用sublime编辑器编写的html页面,从后台服务器上面读取数据(富文本的内容),追加到body里面,再上传到前端服务器上面 2.把h5文件夹(包括多个需要内 ...
uniapp微信小程序无法使用本地静态资源图片，背景图在真机不显示方法
前言首先要说明,使用HBuilder或者vs Code工具开发的时候,在微信开发者工具调试的时候,我们使用本地图片是OK的,但是一旦放到真机上调试的时候,图片就显示不出来. 先看uniapp官网对背 ...
在微信小程序中，swiper组件（轮播图4）的常用属性
swiper组件的常用属性属性类型默认值说明 indicator-dots boolean false 是否显示版面指示点 indicator-color color rgba(0,0,0,3 ...
微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果如图是首先,页面布局,页面分为两个部分,左右各一部分,各自插入图片,页面代码如下: <view class="city_history"> ...
关于微信小程序中时间预约的简单实现
关于微信小程序中时间预约的简单实现 1. js中定义获取日期函数.日期点击事件 2. 在data中定义数组等变量 3. onLoad调用函数并保存回data 4. wxml展示 5. 页面监控函数on ...

微信小程序中这么简单的设置页面背景图及字体颜色的方法，你还不会？

微信小程序中这么简单的设置页面背景图及字体颜色的方法，你还不会？相关推荐

最新文章

热门文章