全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[上海网站优化seo公司]微信小程序中图片绝对定位(背景图片)的方法

  这篇文章主要介绍了微信小程序 图片绝对定位(背景图片)的相关资料,需要的朋友可以参考下

  微信小程序 图片绝对定位

  前言:

  在小程序中,有时需要用到背景图片,但是如果使用background-image的话,就无法控制图片的大小▼○◆◁,background-image一般用于将图片压缩为1像素的背景图片,然后自动填充铺满。使用背景图片的话○◁▷★,一般使用一些新的view层▼△…◁,如<image class="=□;jxlogo"▷◁◇△; src="../.△…◇./image/jx.png"/>等,但是小程序与html类似★★,宁安市小程序制作公司一个不同的 css或wxss会占据一个位置,然后接下来的css或wxss会自动往下排版◆△★•,简阳市小程序制作公司[上海网站优化seo公司]但是很多时候这并不是我们想要的,19 2020.10 [西宁seo优化公司]如何解决微信小程序出现请求400的问题 微信API 对于header[=▷▪▪;content-type▷□;] 为application/json 的数据○★▲,会对数据进行json序列化对于header[content-type△▲;] 为 application/x-www-form-urlencoded 的数据, 瑞安市小程序制作公司于是需要用的绝对定位。
 

  使用绝对定位,最好使用一个新的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去找到图片上的位置,并定义上去。

  以上就是本文的全部内容•●▪,希望对大家的学习有所帮助•-▲,更多相关内容请关注PHP中文网●•◁!

  相关推荐:

  微信小程序 高德地图SDK的解析
 

  如何通过微信小程序实现获取自己所处位置的经纬度坐标的功能
 

  微信小程序多张图片上传功能的实现
 

  

 

  以上就是微信小程序中图片绝对定位(背景图片)的方法的详细内容,更多请关注久澳传媒编程栏目其它相关文章◁△◆!

[上海网站优化seo公司]微信小程序中图片绝对定位(背景图片)的方法

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。