微信小程序 图片绝对定位(背景图片)


Posted in Javascript onApril 05, 2017

微信小程序 图片绝对定位

前言:

在小程序中,有时需要用到背景图片,但是如果使用background-image的话,就无法控制图片的大小,background-image一般用于将图片压缩为1像素的背景图片,然后自动填充铺满。使用背景图片的话,一般使用一些新的view层,如<image class="jxlogo" src="../../image/jx.png"/>等,但是小程序与html类似,一个不同的 css或wxss会占据一个位置,然后接下来的css或wxss会自动往下排版,但是很多时候这并不是我们想要的,于是需要用的绝对定位。

使用绝对定位,最好使用一个新的wxss将所有子控件包含起来,然后在这个包含所有子控件的wxss中,定义一个属性 position: relative,在每个子控件中,定义 position: absolute,现在就可以通过绝对定位来修改位置,如top等,以下附上部分wxss代码:

.jx_card{
  width: 100%;
  height: 295rpx;
  background-color:#e6e6e6;
  position: relative
}
 .jxlogo{
  top: 47.5rpx;
  margin-left: 50rpx;
  width: 200rpx;
  height: 200rpx;
  float: left;
  position: absolute;
}

然后附上wxml代码:

<view class="jx_card">
  <image style="width: 740rpx; height: 275rpx;margin-left=10rpx;margin-top:10rpx;" mode="{{item.mode}}" src="../../image/优惠券_03.png">
      <image class="jxlogo" src="../../image/jx.png"/>
  </image>
 </view>

大概内容就是这样,主要是通过position先定义定位的类型,然后通过top去找到图片上的位置,并定义上去。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 #Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 #Javascript
JS二叉树的简单实现方法示例
Apr 05 #Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 #Javascript
js获取指定时间的前几秒
Apr 05 #Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 #Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 #Javascript
You might like
php中的抽象方法和抽象类
2017/02/14 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
广告切换效果(缓动切换)
2009/05/27 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
js实现中文实时时钟
2020/01/15 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
列举Python中吸引人的一些特性
2015/04/09 Python
python 排序算法总结及实例详解
2016/09/28 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Python生成器generator用法示例
2018/08/10 Python
对python字典过滤条件的实例详解
2019/01/22 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
用python写爬虫简单吗
2020/07/28 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
2015年复活节活动总结
2015/02/27 职场文书
小学运动会加油稿
2015/07/22 职场文书
初中美术教学反思
2016/02/17 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
Python max函数中key的用法及原理解析
2021/06/26 Python
基于angular实现树形二级表格
2021/10/16 Javascript