Question

我使用离子3。如何将图像放在导航栏的背景中？

<ion-tabs color="dark">
  <ion-tab [root]="tab1Root" tabTitle="Sp" tabIcon="ios"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Vs" tabIcon="ios"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Im" tabIcon="ios"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="Alm" tabIcon="ios"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="Sts" tabIcon="ios"></ion-tab>
</ion-tabs>

Answer 1

你可以做这样的事情

<ion-navbar *navbar primary></ion-navbar>
<ion-navbar *navbar secondary></ion-navbar>
<ion-navbar *navbar danger></ion-navbar>

您可以在variable.scss

中添加此代码

ion-header{
    ion-navbar{
        div.toolbar-background{
             background-image: url('../../assets/tresemme.png');
             background-repeat: no-repeat;
             background-size:cover;
             text-align: center;
        }
    }
}

Answer 2

请尝试在屏幕中添加以下工作代码

<ion-header class="commonHeaderCls">
  <ion-navbar>
    <ion-title></ion-title>
  </ion-navbar>
</ion-header>

在CSS中添加以下代码
.commonHeaderCls .toolbar-background {
    高度：100％；
    背景：url（../ assets / imgs / header_logo.png）;
    背景位置：居中居中；
    背景重复：不重复；
    背景大小：自动100％；
    z-index：5000；
}

[请注意，您必须使用自己的图像路径而不是header_logo.png]

Answer 3

您可以使用CSS实现这一目标：

ions-tabs {
    background: url(http://background/here.jpg) repeat-x center center;
    padding-bottom: 20px;
}

Answer 4

将此添加到ur css文件中

ions-tabs {
    background:url(image.jpg);
    background-repeat:repeat-x;
    background-position:center center;
    padding-bottom: 20px;
}

Answer 5

请尝试添加以下代码

<ion-tabs color="dark" class="custom-tabs">
   <ion-tab [root]="tab1Root" tabTitle="Sp" tabIcon="ios"></ion-tab>
   <ion-tab [root]="tab2Root" tabTitle="Vs" tabIcon="ios"></ion-tab>
   <ion-tab [root]="tab3Root" tabTitle="Im" tabIcon="ios"></ion-tab>
   <ion-tab [root]="tab4Root" tabTitle="Alm" tabIcon="ios"></ion-tab>
   <ion-tab [root]="tab5Root" tabTitle="Sts" tabIcon="ios"></ion-tab>
</ion-tabs>

并在CSS中添加以下代码

.custom-tabs{
   .tabbar{
      background: url(../assets/imgs/header_logo.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: auto 100%;
   }
 }

[请注意，您必须使用自己的图像路径而不是header_logo.png]

如何更改导航栏的背景？

5 个答案: