代码之家 › 专栏 › 技术社区 › user3024827

离子4透明头

ionic-framework angular

user3024827 · 技术社区 · 6 年前

这不起作用,并且始终将工具栏保留在顶部。我也将此添加到css中:

ion-toolbar {
   --background: transparent;
   --ion-color-base: transparent !important;
}

<ion-header>
  <ion-toolbar translucent >
    <ion-buttons slot="start"  (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen >
</ion-content>

但是,在这个类中没有与背景颜色相关联的变量,因此我不能使用这个方法更改背景。

解决方案:

<ion-header>
  <ion-toolbar translucent>
    <ion-back-button></ion-back-button>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen> </ion-content>

ion-toolbar {
--ion-toolbar-background-color: transparent;
--ion-toolbar-text-color: white;
}

文档只指定了HTML方面的内容,但是在Ionic中使用新的shadowDOM时,必须使用变量来更改大多数Ionic组件样式。

3 回复 | 直到 5 年前

kalememre 6 年前

你试过这个吗?

ion-toolbar {
   --background-color: transparent;
   --ion-color-base: transparent !important;
 }

chris cooley 6 年前

如果你想在爱奥尼亚4半透明标题你需要添加“半透明”属性标题标签,而不是工具栏标签。

<ion-header translucent="true">
  <ion-toolbar>
    <ion-title>Toolbar Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
    <!-- content here -->
</ion-content>

从爱奥尼亚医生那里。。。 Translucent

属性:半透明

Gary Großgarten 6 年前

...    
<ion-toolbar color="translucent"> 
...

如果你想去掉标题的框阴影,你可以在css中这样做:

.header::after {
  background-image: none;
}

Gabriel Visconti 5 年前

这对我有效,标题是透明的,但仍然有一些空白

ion-toolbar {
  --background-color: transparent;
  --ion-color-base: transparent !important;
}

但使用“离子内容”中的“离子”工具栏将其从背景上方移除

<ion-content>
  <ion-toolbar slot="fixed">
  </ion-toolbar>
</ion-content>

Prashant Gupta 5 年前

试试这个
mypage.page.html

<ion-header no-border no-shadow>

  <ion-toolbar color="medium">
    <ion-title>My Page</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">

</ion-content>

现在换衣服 变量.scss 中等颜色文件

--ion-color-medium: #ffffff00;

Kangudie Muanza - Killmonger 5 年前

我试过这个,很管用

ion-toolbar {
  --background: transparent;
  --ion-color-base: transparent !important;
}

<ion-header translucent></ion-header>

<ion-content fullscreen>
    <div class="contenu"></div>
</ion-content>

我还想在.scss文件中注意到这一点。我做的

 .contenu {
     position : absolute; 
     top : 0;
     left : 0;
     height: 100vh;
     width: 100vw;
  }

因为内容在标题下

Sinandro 5 年前

我有个问题 ion-content ion-toolbar 给我的 离子含量 并利用 slot=fixed

<ion-content>

  <ion-toolbar slot="fixed">
    ...
  </ion-toolbar>

  ...

</ion-content>

ion-toolbar {
  --background-color: transparent;
  --ion-color-base: transparent !important;
}

aboiledtiger 5 年前

您应该使用:

ion-toolbar {
    --background: transparent;
    --ion-toolbar-text-color: white;
}

请参阅--如中所用的背景 ionic docs

Prabhu Anand 5 年前

在CSS中

.productHeader {
    --background: transparent;
}

离子型HTML

<ion-header no-border>
  <ion-toolbar class="productHeader">
   .
   .
   .
  </ion-toolbar>
</ion-header>

<ion-content fullscreen>
  .
  .
  .
</ion-content>

确保添加 fullscreen ion-content 为了消除出现在标题中的阴影,我添加了 no-border

Aingeru72 3 年前

这两种解决方案对我都不起作用(离子型5,角型11),但最终实现了:

ion-content {
  position: absolute;
  top: 0;
}