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

Question

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

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

sidemenu.component.scss

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

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

结果：

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

注意：我可以通过 official Ionic 4 docs 上的 DevTools 重现这种奇怪的行为，如果您将 ion-items 背景设置为透明，则在该示例中添加背景 ion-content 将不会发光，因为嗯

这里有人有想法吗，那里发生了什么？

Answer 1

根据离子官方文档：[https://ionicframework.com/docs/theming/colors][1]

每种颜色都包含以下属性：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 变量的新 class。 class 必须以 .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);
}

添加class后，该颜色可用于任何支持属性颜色的Ionic组件。下面是在 Ionic 按钮上使用最喜欢的颜色的示例。

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

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

Answer 2

更新：

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

这对我有用：

ion-list {
    background: transparent;

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

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

Ionic 4: ion-item background transparent has no effect

css

sass

ionic-framework

angular

ionic4