如何在导航栏ios上重叠图像

Posted 2023-03-13

【中文标题】如何在导航栏ios上重叠图像

【英文标题】：How to overlap image on navbar ios

【发布时间】：2019-08-03 05:50:14

【问题描述】：

大家可以看到，在图片顶部有一个空白状态栏（white bar）

我的问题：

它可以在状态栏上使用我的封面（图片）吗？

我的代码：

profile.ts

<ion-content *ngIf="showLogin == false" no-bounce class="bg-modal">
    <div class="header-image">
        <img src="../assets/imgs/Tkm-resources/Capa.png" onerror="this.src = '../assets/imgs/Tkm-resources/Capa.png'"/>
    </div>

    <div class="main-content" text-wrap text-center>

        <div class="circular">
            <img no-border src=" usuario.avatar "
                 onerror="this.src='../../assets/imgs/person-flat.png'" (click)="changePicture()"/>
        </div>
        <h6 no-margin padding-top> usuario.nome </h6>
        <span color="ticket-grey"> usuario.email </span>
        <div>
            <ion-row margin-top  (click)="onClickLogout()">
                <ion-icon name="ios-exit" item-left color="primary"></ion-icon>
                <span margin-left> Deslogar</span>
            </ion-row>
        </div>
    </div>
</ion-content>

【参考方案1】：

为了删除这些空白，您可以在元标记中添加以下内容：

viewport-fit=cover

例子：

<meta name="viewport" content-type="initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

【参考方案2】：

使其兼容并删除顶部空白的首选方法是：

将 viewport-fit=cover 添加到 index.html 中的 viewport 元标记中 下面：

<meta name="viewport" content="initial-scale=1,user-scalable=no, width=device-width, height=device-height, viewport-fit=cover">

请确保所有参数都正确命名并重新检查并验证是否已添加参数。

如果这些参数设置正确，检查容器视图的填充。

请参阅这些1,2,3 了解更多信息和清晰度。

【讨论】：

栏还是空白... :(!

你可以尝试改变离子含量的BG颜色并观察状态栏的颜色。

另外，问题可能是由于样式。

@PéttrinMiranda 你试过改变背景颜色吗？