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


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 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
如何提高数据访问速度
Dec 26 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
vue3中的组件间通信
Mar 31 Vue.js
使用Ajax实现进度条的绘制
Apr 07 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时间戳使用实例代码
2008/06/07 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
如何开启linux的ssh服务
2013/06/03 面试题
外语系毕业生找工作的求职信
2013/11/28 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
2014年体育部工作总结
2014/11/13 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android