IONIC 5离子头对离子含量的背景图像不透明

问题描述

我刚刚使用ionic 5创建了一个空白项目，并为内容添加了背景图片。之后，我修改了page.page.scss文件以使标题透明，但是它不起作用。

如果我只是选择离子含量的背景色，那行得通。

请帮助我。

这是我的环境：

离子：

   Ionic CLI                     : 6.11.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.901.12
   @angular-devkit/schematics    : 9.1.12
   @angular/cli                  : 9.1.12
   @ionic/angular-toolkit        : 2.3.0

电容器：

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

实用程序：

   cordova-res : not installed
   native-run  : not installed

系统：

   NodeJS : v14.7.0 (/usr/local/bin/node)
   npm    : 6.14.7
   OS     : macOS Catalina

这是页面SCSS代码：

  // ion-content {--background: #f1453d !important;
  //             --color : #f1453d !important }

  ion-content {
    --background : none;
    border:none;
    background-image: url(../../assets/imgs/bckgrnd.jpg) ;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size:cover;
    background-position:center bottom;
  }

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

HTML代码：

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>

图像中的结果：

header white but not transparent...

因此，如果有人已经遇到了这个问题或解决方案，它将使我和我的应用程序免于许多麻烦。

谢谢你再见

解决方法

根据离子文档（https://ionicframework.com/docs/api/header），要使标题透明，您需要将 mode 和 translucent 属性设置为 ios strong>和 true 。

例如：

<ion-header mode="ios" translucent="true">
    <ion-toolbar>
        <ion-title size="large">My Navigation Bar</ion-title>
    </ion-toolbar>
</ion-header>

文档还提到，如果设备不支持backdrop-filter，则此操作将无效。您也可以取消半透明的html绑定，除非您使用布尔值true的变量“ true”。

如果这不起作用，请尝试摆脱ion-header。

感谢您的帮助。我只是成功地使标题变为半透明但不透明..arghh

在CSS文件中，我更改了内容的--background功能，并在ion-header标签中添加了mode =“ ios”属性：

  ion-content {
    --background:url(../../assets/imgs/bckgrnd.jpg)  no-repeat 100% center/cover;
    border:none;
    //background-image: url(../../assets/imgs/bckgrnd.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size:cover;
    background-position:center bottom;
  
  }

<ion-header translucent="true" mode="ios">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

我不知道我做错了什么，也不知道ionic 5是否失去了此功能...那将很奇怪，而且非常糟糕... 这就是为什么我认为我做错了...

这是图片： Header translucent,not transparent

再次感谢您！

按照以下步骤使标题透明

在variable.scss中添加

:root {
        --ion-toolbar-background:transparent;
      }

HTML代码

<ion-header class="ion-no-border">
  <ion-toolbar>
  </ion-toolbar>
</ion-header>
<ion-content >
   <div >
     <ion-img class="bgr" src="../../../assets/imgs/background_doodle.png"> 
     </ion-img> 
   </div>  
</ion-content>

在.scss中添加

.bgr {
        height: 100%;
        width: 100%;
        top: 0;
        position: fixed;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        object-fit: cover;
     }
        ::-webkit-scrollbar,*::-webkit-scrollbar {
        display: none;
     }

这是一个非常简单的“单线” CSS解决方案，用于向离子4+内容元素添加透明（背景）图像，而不会遇到诸如文本之类的透明子元素的麻烦。

ion-content { 
  --background: linear-gradient(rgba(255,255,0.8),rgba(255,0.8)),url("assets/background_small.png") no-repeat center center / cover; 
}

-background：-操纵Web组件的CSS（阴影DOM）
linear-gradient（...）：为图像添加透明度（实际示例中为0.2！）
无重复中心/封面：无休止地拉伸图像

ionic-framework ionic5 transparent