从ion-tab-bar ionic 7中删除黑色背景

icnyk63a  于 2023-05-11  发布在  Ionic
关注(0)|答案(1)|浏览(173)

我在一个离子7项目工作,在这里我有一个导航指南4标签
我想风格的iontabs现在,并已添加自定义的css。
我得到一个黑色的背景,虽然该地区应该是透明的。
我有一个类似的问题,我面前的一个问题,我作为参考,但解决方案没有帮助我在这里(remove white background from ion-tab-bar ionic 4)。
联系我们

<ion-tabs>
  <div class="tabs-inner"></div>
  <div  style="background-color: whitesmoke; border-radius: 20px 20px 0 0 ;">

  <ion-tab-bar slot="bottom">

      <ion-tab-button tab="race">
        <ion-icon name="map-outline"></ion-icon>
      </ion-tab-button>

      <ion-tab-button tab="favoriten">
        <ion-icon name="bookmarks-outline"></ion-icon>
      </ion-tab-button>

      <ion-tab-button tab="start">
        <ion-icon name="home-outline"></ion-icon>
      </ion-tab-button>

      <ion-tab-button tab="me">
        <ion-icon name="person-outline"></ion-icon>
      </ion-tab-button>

  </ion-tab-bar>

</div>

</ion-tabs>

css:

ion-tab-bar{
  //position: absolute;

  --background: rgba(255,255,255,5);
  border-radius: 25px 25px 25px 25px;
  margin-left: 15px;
  margin-right :15px;
  margin-bottom: 15px;
  margin-top: 15px;
  background-color: black;
  box-shadow:
  0px 3px 6px 0px rgba(0,0,0,0.04),
  0px 1px 3px 0px rgba(0,0,0,0.02);
  flex: 1;
  position: unset !important;
}

.tabs-inner {
  position: relative;
  //flex: 1;
  contain: layout size style;
}

我还在global.scss中添加了以下内容,不幸的是没有成功

.tabs-inner {
  position: unset !important;
}

b4wnujal

b4wnujal1#

你的背景是黑色的,这就是为什么……

ion-tab-bar{
  background-color: black;
}

它需要透明。

ion-tab-bar{
  background-color: rgba(0,0,0,0.5);
}

相关问题