错误示例
微信小程序开发过程中,为了增加界面的美观程度,可以尝试将一张图片设置为背景。在网上最主要的方法为:
index.wxml
<view class="content">
<!--pics文件夹下的background.jpg文件-->
<image class='background' src="/images/beijing.jpg" mode="aspectFill"></image>
<!--页面其它部分-->
</view>
index.wxss
page{
height:100%;
}
.background {
width: 100%;
height: 100%;
position:fixed;
background-size:100% 100%;
z-index: -1;
}
但是问题出现了,在导航栏和图片的交界处出现了一条白线,十分影响美观。
正确示例
所以需要再加上如下两段代码,以便于隐藏这一条白条:
index.wxml(注:此条代码必须放在最后,否则可能会把这段代码之后的view组件遮盖)
<view class='main'>
<image src="{{url}}" mode='widthFix' >
</image>
</view>
index.wxss
.main{
width: 100%;
height: 100%;
}
image{
width:100%;
height: 100%;
position: absolute;
top:0px;
bottom:0px;
}
效果如下:
正确代码段
为方便摘用,整合为一下内容:
index.wxml
<view class="content">
<!--pics文件夹下的background.jpg文件-->
<image class='background' src="/images/beijing.jpg" mode="aspectFill"></image>
<!--页面其它部分-->
</view>
//*************此处添加代码*************//
<view class='main'>
<image src="{{url}}" mode='widthFix' >
</image>
</view>
index.wxss
page{
height:100%;
}
.background {
width: 100%;
height: 100%;
position:fixed;
background-size:100% 100%;
z-index: -1;
}
image{
width:100%;
height: 100%;
position: absolute;
top:0px;
bottom:0px;
}
.main{
width: 100%;
height: 100%;
}