uniapp 小程序修改页面顶部背景颜色

效果图：

pages.json:

navigationStyle，默认是default，即带有原生导航栏；将navigationStyle设为custom后，即页面没有原生导航。

	{
			"path": "pages/dashboard/index",
			"style": {
				"navigationStyle": "custom"
			}
		},

pages/dashboard/index.vue 页面内容
html:
<view class="container">
	<image src="https://img1.baidu.com/it/u=3545684116,1574070268&fm=253&fmt=auto&app=138&f=PNG?w=750&h=456" mode=""
			class="bg">
    </image>
    <view class="header">
    //页面内容
    </view>
</view>


css:
.container {
		width: 100%;
		position: relative;
	}
.bg {
		width: 100%;
		height: 540rpx;
	}
.header{
        position: absolute;
		width: 100%;
		padding: 20rpx 38rpx;
		top: calc(28rpx + var(--status-bar-height));//--status-bar-height 页面状态栏高度
		box-sizing: border-box;
}