微信小程序--窗口背景颜色铺满页面

编写一个页面 welcome.wxml文件：

<view class="container"><image src="/images/avatar/1.png" class='user-avatar'></image><!--text \n可进行换行 包含在这个标签里面的文字在手机上才可以常摁复制 --><text class='user-name'>hello,<text style='color:red'>world</text></text><view class='moto-container' bindtap='onTap'><text class='moto'>开启小程序之旅</text></view>
</view>

welcome.wxss文件：

/*静态样式，建议写在wxss文件中，动态样式可以写在wxml中用style*/.container{display: flex;flex-direction:column;align-items: center;background-color:#b3d4db;
}
.user-avatar{height:200rpx;width:200rpx;margin:30rpx;
}.user-name{margin-top: 200rpx;font-size: 42rpx;font-weight: bold;
}.moto{font-size: 32rpx;font-weight: bold;line-height: 80rpx;color:#405f80;
}.moto-container{margin-top: 200rpx;border: 1rpx solid #405f80;width:250rpx;height:80rpx;border-radius: 5px;text-align: center;
}

welcome.json:

{"navigationBarBackgroundColor": "#b3d4db"
}

显式的效果如下

：

设置了background-color，但是效果不是我想要的那样

此处background-color设置的只是<view>标签里边container的背景，通过调试工具可以看到，其实wxml页面还有一个隐藏的page标签，所以在wxss中加上以下代码：

page{height:100%;background-color: #b3d4db;
}

效果如图：

微信小程序--窗口背景颜色铺满页面相关推荐

微信小程序设置背景图铺满顶部
由于微信小程序自带顶部导航栏,导致我们设置背景图时总是无法铺满顶部,其实想要铺满顶部只需要改变一个属性即可.将navigationStyle的默认属性修改为custom 在微信小程序需要设置背景图的文 ...
微信小程序---修改背景颜色和单个页面的背景颜色
1.给所有页面设置背景颜色在app.wxss里设置 page{background-color:#f3f3f3;} 2.给单个页面设置背景颜色在单个页面的.wxss里设置 page{backgro ...
python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
微信小程序 Picker-view背景透明设置
微信小程序 Picker-view背景透明设置在使用picker-view时,需要设置picker-view背景透明时,在wxml中设置 <picker-view mask-style=&qu ...
微信小程序设置背景图的几种方式
微信小程序设置背景图的几种方式原本在html中可以通过background-image来设置背景图片 .page {width: 100%;height: 100%;background-size: ...
写网页的那些小总结——背景图片透明，背景图片铺满页面
1.使用opacity属性会让背景图片和盒子中的文字内容都透明,如果想要背景图片透明,文字内容不透明,就可以使用以下代码: 某例子: background: rgba(255,255,255,0.6) ...
HTML+CSS实现背景图片铺满页面的方法
HTML+CSS实现背景图片铺满页面的方法针对页面背景图片我整理了几种方法仅供参考一.DIV中添加背景图片二.img中设置背景图片三.Body中设置背景图片结语针对页面背景图片我整理了几种 ...
微信小程序开发：学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]--页面跳转及传参页面跳转一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
解决微信小程序使用switchTab跳转后页面不刷新的问题
解决微信小程序使用switchTab跳转后页面不刷新的问题参考文章: (1)解决微信小程序使用switchTab跳转后页面不刷新的问题 (2)https://www.cnblogs.com/mmyk ...

微信小程序--窗口背景颜色铺满页面

微信小程序--窗口背景颜色铺满页面相关推荐

最新文章

热门文章