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


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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
javascript arguments使用示例
Dec 16 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
js实现抽奖功能
Nov 24 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用GD库生成高质量的缩略图片
2011/03/09 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
yii操作session实例简介
2014/07/31 PHP
提高php编程效率技巧
2015/08/13 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
PDO::prepare讲解
2019/01/29 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
php无限极分类实现方法分析
2019/07/04 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
JavaScipt基本教程之前言
2008/01/16 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
Mint UI组件库CheckList使用及踩坑总结
2018/12/20 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
详解flask表单提交的两种方式
2018/07/21 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
python re.match()用法相关示例
2021/01/27 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
美术毕业生求职信
2014/02/25 职场文书
《老山界》教学反思
2014/04/08 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
年会邀请函范文
2015/01/30 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
讲解Python实例练习逆序输出字符串
2022/05/06 Python