问题

Here is the translated content:

我正在开发一个 Ionic 7 项目，这里有一个包含 4 个选项卡的导航指南。

我想要样式化 ion-tabs 并添加了自定义 CSS。

尽管区域应该是透明的，但我得到了黑色的背景。

我遇到了一个与我之前提到的问题类似的问题，我参考了这个问题但解决方案对我没有帮助（https://stackoverflow.com/questions/59682805/remove-white-background-from-ion-tab-bar-ionic-4）。

HTML：

  <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>

```

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;
}

<details>
<summary>英文:</summary>

i am working on an ionic 7 project, here i have a navigation guide with 4 tabs

i want to style the iontabs now and have added custom css. 

i get a black background although the area should be transparent.

i have a similar problem to a question before me that i took as a reference, however the solution did not help me here (https://stackoverflow.com/questions/59682805/remove-white-background-from-ion-tab-bar-ionic-4).

html:

<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;
}

i have also added the following to global.scss unfortunately without success

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

[![enter image description here][1]][1]

[1]: https://i.stack.imgur.com/W5fl6.png

</details>


# 答案1
**得分**: 1

将背景改为黑色，这就是原因...

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

需要将其设为透明。

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

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

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