小程序图片绝对定位（背景图片）
⼩程序图⽚绝对定位（背景图⽚）
⼩程序图⽚绝对定位
前⾔：
在⼩程序中，有时需要⽤到背景图⽚，但是如果使⽤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;
创意号id
height: 200rpx;
float: left;高考查分入口
position: absolute;
}
然后附上wxml代码：
<view class="jx_card">
<image mode="{{de}}" src="../../image/优惠券_03.png">
<image class="jxlogo" src="../../image/jx.png"/>
秦皇岛特产
</image>
</view>
⼤概内容就是这样，主要是通过position先定义定位的类型，然后通过top去到图⽚上的位置，并定义上去。
感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。