Question

我想更改侧面菜单的背景颜色，我尝试了一些操作，但是没有用。

ion-menu{
    ion-content{
        background-color: transparent !important;
    }

    .inner-scroll {
        --background: var(--ion-menu-background);
    }
}

有人知道我如何在ionic 4中更改背景颜色吗？

Answer 1

在存在渐变和阴影的情况下，可以尝试此操作。如果您希望整个侧面菜单具有渐变，没有任何边界，将工具栏，内容和项目分开，则此功能特别有用。

//在variable.scss文件中，您可以创建Ionic CSS变量

:root
{
--custom-menu: radial-gradient(
        circle farthest-corner at 10% 20%,
        rgba(246, 133, 133, 1) 16.3%,
        rgba(172, 131, 241, 1) 90%
    );
}

///在app.component.scss文件中，您需要引用您创建的变量

 ion-menu {
    --ion-background-color: var(--custom-menu);

    ion-toolbar {
        --background: transparent;
    }

    ion-list {
        background: transparent;
    }
    ion-item {
        color: rgb(255, 255, 255);
        --background: transparent;
    }
    ion-content {
        --background: transparent;
    }
}

//在appcomponent.html文件中，确保您指定了无边界指令

<ion-header no-border>
  <ion-toolbar>
    <ion-title>Test</ion-title>
  </ion-toolbar>
</ion-header>

This is the output

Answer 2

尝试一下

    .inner-scroll {
        background: green;
    }
   .inner-scroll .item-native{
        background: green;
    }

如何在ionic 4中更改侧菜单背景颜色？

2 个答案: