错误示例

微信小程序开发过程中，为了增加界面的美观程度，可以尝试将一张图片设置为背景。在网上最主要的方法为：
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%;
}

微信小程序开发—背景图片全屏（无白条）相关推荐

微信小程序开发之——视图全屏显示
一概述本文介绍两种将view全屏显示的方式: 布局文件设置宽度和高度代码中获取到屏幕的宽度和高度,设置到view上二布局设置宽高全屏 2.1 布局文件(index.wxml) <vie ...
python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
微信小程序开发实现图片滚动效果
微信小程序开发实现图片滚动效果效果:左右滑动可以切换展示图片代码:   <swiper&g ...
微信小程序页面背景图片设置
微信微信小程序页面背景图片background-image使用及大小设置源代码//index.wxss page{ background-size:100% 100%; background-ima ...
微信小程序开发(二)图片上传
更新2017-08-24 更新七牛SDK只最新7.0.5版本. 在之前的博客<Node.js+express+MySQL使用七牛云实现的用户头像修改>,已经实现了在MUI框架或者< ...
微信小程序开发教程(破解版IDE 无内测资格也可使用)
破解版IDE下载地址,以及使用说明: http://download.csdn.net/download/aa841538513/9637813 http://download.csdn.net/do ...
微信小程序设置背景图片不显示问题解决方法
最近开发小程序的过程中遇到了这样一个小问题,在wxss文件中通过background设置背景图片,要实现背景图片上显示文字的效果,发现背景图片不显示,设置背景图片的代码如下: .test {width ...
微信小程序设置背景图片
经常为微信小程序设置颜色背景,突然发现一张好看的图片怎么把它设置为背景呢? 以下总结了三种方法: css中通过url获取网络图片微信小程序中不能使用本地图片 background-image:url ...
微信小程序通过背景图片的方式插入图片
微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片: 通过官网将本地图片转成base64的图片: http://tool.chinaz.com/t ...

微信小程序开发—背景图片全屏（无白条）

目录

错误示例

正确示例

正确代码段

微信小程序开发—背景图片全屏（无白条）相关推荐

最新文章

热门文章