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


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 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
基于Bootstrap框架实现图片切换
Mar 10 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
夯基础之手撕javascript继承详解
Nov 09 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
使用Apache的rewrite技术
2006/06/22 PHP
php获取字段名示例分享
2014/03/03 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
PDO::errorCode讲解
2019/01/28 PHP
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
javascript时区函数介绍
2012/09/14 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
浅谈js的异步执行
2016/10/18 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
python中的装饰器详解
2015/04/13 Python
Python的SQLAlchemy框架使用入门
2015/04/29 Python
django-初始配置(纯手写)详解
2019/07/30 Python
python实现智能语音天气预报
2019/12/02 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
国际经济贸易专业推荐信
2013/11/06 职场文书
两则小学生的自我评价分享
2013/11/14 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
运动会宣传语
2015/07/13 职场文书
法制主题班会教案
2015/08/13 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android