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


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 相关文章推荐
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
JS中字符串trim()使用示例
May 26 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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判断文件夹是否存在不存在则创建
2015/04/09 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
vue实现分页加载效果
2019/12/24 Javascript
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
python实现文法左递归的消除方法
2020/05/22 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
少先队入队活动方案
2014/02/08 职场文书
个人对照检查材料
2014/02/12 职场文书
创先争优承诺书范文
2014/03/31 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
警告通知
2015/04/25 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
2016年教代会开幕词
2016/03/04 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python