程序图⽚绝对定位背景图⽚)
⼩程序图⽚绝对定位
前⾔:
在⼩程序中,有时需要⽤到背景图⽚,但是如果使⽤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 mode="{{de}}" src="../../image/优惠券_03.png">
<image class="jxlogo" src="../../image/jx.png"/>
</image>
</view>
⼤概内容就是这样,主要是通过position先定义定位的类型,然后通过top去到图⽚上的位置,并定义上去。
感谢阅读,希望能帮助到⼤家,谢谢⼤家对本站的⽀持!