Css 离子4：离子项目背景透明没有效果

我知道，有很多这样的主题，但不幸的是，没有一种方法适合我，我可以将离子项目的背景色设置为透明

侧菜单.component.ts

<ion-menu side="start" menuId="first" contentId="main" class="custom-bg">
    <ion-header>
        <ion-toolbar>
        <ion-title>{{env.appName}}</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <ion-menu-toggle auto-hide="true">
                <ion-item *ngFor="let item of navItems" [routerLink]="item.url" routerDirection="forward">
                    <ion-icon [name]="item.icon" slot="start"></ion-icon>
                    <ion-label>{{item.title}}</ion-label>
                </ion-item>
            </ion-menu-toggle>
        </ion-list>
    </ion-content>
</ion-menu>

ion-toolbar,
ion-content,
ion-item {
    --background: transparent;
    --color: var(--ion-color-primary-contrast);
}

.custom-bg {
    --background: red;
}

结果：

我没有主意了，该试试什么。请注意，如果我将离子项的--background属性设置为常规颜色，则一切都会按预期工作。对我来说，似乎有另一个白色背景的元素，而不仅仅是离子

注意：我可以通过上的DevTools重现这种奇怪的行为，如果将离子项目背景也设置为透明，则在示例上添加离子内容的背景将不会显示出来

---

这里的任何人都有一个想法，那里发生了什么事？

根据爱奥尼亚的官方文件：[

每种颜色都由以下属性组成：

base

、

contrast

、

shade

和

tint

。底色和对比色还需要rgb属性，该属性的颜色相同，只是rgb格式。有关为什么还需要rgb属性的解释，请参阅Alpha问题

要添加新颜色，首先在根位置为颜色的所有变体定义CSS变量。例如，要添加名为favorite的新颜色，我们可以定义以下变量：

:root {
  --ion-color-favorite: #69bb7b;
  --ion-color-favorite-rgb: 105,187,123;
  --ion-color-favorite-contrast: #ffffff;
  --ion-color-favorite-contrast-rgb: 255,255,255;
  --ion-color-favorite-shade: #5ca56c;
  --ion-color-favorite-tint: #78c288;
}

然后，创建一个使用这些CSS变量的新类。该类必须以

.ion color-{color}

格式编写，其中

{color}

是要添加的颜色的名称：

.ion-color-favorite {
  --ion-color-base: var(--ion-color-favorite);
  --ion-color-base-rgb: var(--ion-color-favorite-rgb);
  --ion-color-contrast: var(--ion-color-favorite-contrast);
  --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
  --ion-color-shade: var(--ion-color-favorite-shade);
  --ion-color-tint: var(--ion-color-favorite-tint);
}

添加类后，颜色可以用于任何支持颜色属性的Ionic组件。下面是在Ionic按钮上使用收藏夹颜色的示例

<ion-button color="favorite">Favorite</ion-button>

最爱

---

您可以根据爱奥尼亚官方文档为透明创建类似的自定义颜色：[

每种颜色都由以下属性组成：

base

、

contrast

、

shade

和

tint

。底色和对比色还需要rgb属性，该属性的颜色相同，只是rgb格式。有关为什么还需要rgb属性的解释，请参阅Alpha问题

要添加新颜色，首先在根位置为颜色的所有变体定义CSS变量。例如，要添加名为favorite的新颜色，我们可以定义以下变量：

:root {
  --ion-color-favorite: #69bb7b;
  --ion-color-favorite-rgb: 105,187,123;
  --ion-color-favorite-contrast: #ffffff;
  --ion-color-favorite-contrast-rgb: 255,255,255;
  --ion-color-favorite-shade: #5ca56c;
  --ion-color-favorite-tint: #78c288;
}

然后，创建一个使用这些CSS变量的新类。该类必须以

.ion color-{color}

格式编写，其中

{color}

是要添加的颜色的名称：

.ion-color-favorite {
  --ion-color-base: var(--ion-color-favorite);
  --ion-color-base-rgb: var(--ion-color-favorite-rgb);
  --ion-color-contrast: var(--ion-color-favorite-contrast);
  --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
  --ion-color-shade: var(--ion-color-favorite-shade);
  --ion-color-tint: var(--ion-color-favorite-tint);
}

添加类后，颜色可以用于任何支持颜色属性的Ionic组件。下面是在Ionic按钮上使用收藏夹颜色的示例

<ion-button color="favorite">Favorite</ion-button>

最爱

---

您可以为透明创建类似的自定义颜色更新：

终于找到了导致这种奇怪行为的原因。看起来离子列表上的.list是罪魁祸首。

这对我来说是个好办法：

ion-list {
    background: transparent;

    ion-item {
        --background: inherit;
    }
}

---

更新：

终于找到了导致这种奇怪行为的原因。看起来离子列表上的.list是罪魁祸首。

这对我来说是个好办法：

ion-list {
    background: transparent;

    ion-item {
        --background: inherit;
    }
}

---

你能试试吗？--离子色基：透明！重要；替代品对我产生同样的行为……你能试试吗？--离子色基：透明！重要；替代品对我产生同样的行为……我知道在离子中定义自定义颜色的概念。我昨天已经尝试过这种方法了。不幸的是，这没有成功“没有解决我的问题。@F.Geißler可以尝试在组件上设置

封装：ViewEncapsulation.None，

。我知道在Ionic中定义自定义颜色的概念。我昨天已经尝试过这种方法。不幸的是，这没有解决我的问题。@F.Geißler可以尝试设置

封装：ViewEncapsulation.N一个，

在您的组件上。ts