微信小程序 — 背景图片实现。
如图微信小程序背景色。上面放文字如何实现此效果。背景色设置css样式是position: relative;
文字设置css样式position: absolute;
布局wxml:
<view><image src="/static/images/my_bg.png" class="my_bg"></image><text class="companyNameClass textClass">{{qymc}}</text><text class="companyShClass textClass">{{qysh}}</text></view>
对应的css样式:
(1)上面布局的image代表背景图片。设置css样式 宽度高度 position: relative;
.my_bg {width: 100%;height: 330rpx;position: relative;
}
(2)设置文字的样式。 position:absolute; 就是相对背景色的位置参照背景色的位置
.companyNameClass {position: absolute;left: 80rpx;top: 100rpx;font-weight: bold;
}
微信小程序 — 背景图片实现。相关推荐
- 微信小程序背景图片全屏显示
微信小程序背景图片全屏显示 很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
- 微信小程序背景图片设置和图片自适应宽高
微信小程序背景图片设置和图片自适应宽高 我们在开发过程中经常需要对一些元素设置图片为背景图片. 网络图片: .ServiceCenter{width: 100vw;height: 40vw;margi ...
- 微信小程序背景图片不显示
最近学着写了一个微信小程序,可是总是是加载不出背景图片.这里先描述一下问题. 用下面这种办法声明的背景图片在本机和手机上都无法显示. .container { height: 100%; displa ...
- 微信小程序背景图片background无法在手机端显示问题解决方案
之前做过一个小程序项目,页面中有背景图片,使用web开发工具调试时候背景图片能正常显示,使用真机调试及发布线上版本的时候图片不显示,刚开始以为是图片显示路径问题,后面问啦度娘后才发现微信小程序不支持背 ...
- 关于微信小程序背景图片设置
微信小程序在 .wxss文件中不允许设置background-image :url('/img/bg.png');解决方法有如下两种 一:在 .wxss文件中设置背景图片时使用base64 网址:ht ...
- 微信小程序背景图片完全覆盖显示
微信小程序中,背景图片全屏 在微信小程序中需要设置背景图片全屏,这里用到css的知识我们可以: page { overflow:hidden; position:fixed; background-i ...
- 微信小程序 背景图片base64_微信小程序背景图片显示不出来
开发小程序的时候,设置页面的背景,用到css代码:.page__bd{ width: 100%; height: 220px; background: url('../../assets/img/im ...
- 微信小程序背景图片真机不显示问题
问题描述 : 开发者工具上<view style="background-image: url(图片路径);"></view>可以正常显示 但是真机预览,不 ...
- 微信小程序背景图片铺满全屏
效果图: 示例代码: 总结: 全屏的秘诀在于: background-size: 100% 100%; 阅读完有任何问题,联系我微信:ichatme002,备注来自[CSDN]
最新文章
- c语言怎样判断键盘 输入法,如何快速的认识键盘和正确的使用键盘
- gdb set写text/code段错误的解决办法
- 计算机网络(谢希仁第八版)第四章:网络层
- python人工智能——机器学习——分类算法-朴素贝叶斯算法
- 一年的第几周怎么算_外企必备,算某一天是今年第几周,用一个excel函数就搞定...
- 贷款被拒,因为你的手机有问题
- ch341a编程和ttl刷机区别_土豪金CH341a编程器 开箱晒物
- WPF应用程序内嵌网页
- extjs 关于dom操作的几个库
- android dialog遮挡键盘,彻底解决软键盘遮挡DialogFragment
- Android Studio Logcat 截断问题(cocos2d-x 篇)
- unity 下载文件到存放本地
- 互联网中常见的实名认证方式有哪几种?
- JQuery实现简易音乐播放器
- 点击事件@click 失效问题
- amqp协议java_amqp协议链接陷阱-An unexpected connection driver error occured
- 计算机网络基础——WWW万维网
- Java实现第九届蓝桥杯付账问题
- python自带的集成开发环境是什么-跟老齐学Python之集成开发环境(IDE)
- iOS-对 iOS app 进行安全加固
热门文章
- Numpy ravel和flatten区别
- 参与有奖、最高300元、免费打样的PCB书签设计大赛竟然这么简单?作品火热征集中
- 快应用开发文档V1060 图文介绍
- 站长论坛俱往矣,移动社区还看今朝
- android setBackgroundColor的参数填写 使用方法
- 最简易的网络框架封装(新手可看)
- CondaHTTPError:HTTP 000 CONNECTION FAILED for url<https://mirrors.tuna.tsinghua.edu.cn/anaconda***
- 360QVM支持输入向量API一览
- 关于条件方差的一个性质
- Python学习之爬虫(一)--获取论坛中学生获得offer信息