1.问题描述
现在需要开发一个页面，需要将歌曲专辑的图片装满整个页面，并且添加毛玻璃效果。但是正常编写image组件的话，效果如下图所示。可以看出上方仍然有空白部分，被导航栏挡住。
2.解决方案
2.1 navigationStyle的作用
navigationStyle 是微信小程序页面配置中的一个属性，用于指定页面的导航栏样式。
通过设置 navigationStyle 属性，可以改变小程序页面的导航栏样式，包括是否显示导航栏、导航栏的背景色、标题颜色等。它可以取以下几个值：
default（默认值）：页面使用小程序的默认导航栏样式，显示导航栏，并根据系统设置的样式进行渲染。
custom：页面使用自定义的导航栏样式，不显示系统默认导航栏。此时，你可以通过 navigationBar 相关的配置属性来自定义导航栏的样式。
通常情况下，当你希望页面的导航栏样式与小程序默认样式不同，或者需要自定义导航栏的样式时，可以将 navigationStyle 设置为 custom，然后通过设置 navigationBar 的相关属性来自定义导航栏的样式。
例如如下:
{
"navigationStyle": "custom",
"navigationBar": {
"backgroundColor": "#ffffff",
"textColor": "#000000",
"titleText": "Custom Navigation Bar"
}
}
navigationStyle 被设置为 custom，页面将使用自定义的导航栏样式。navigationBar 相关的配置属性用于指定导航栏的背景色、标题颜色和标题内容。你可以根据需求修改这些属性来自定义导航栏的样式。
2.2应用
根据上述文档，我们想要实现对应需求，仅仅需要更改开发页面的json配置文件，以及编写css样式即可
<!--pages/music-player/index.wxml-->
<!-- 1.背景 -->
<image class="bg-image" mode="aspectFill" src="{{currentSong.al.picUrl}}"></image>
<view class="bg-cover"></view>
/* pages/music-player/index.wxss */
.bg-image, .bg-cover {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.bg-cover {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
最终显示的效果如下：
