IONIC 5 離子 header 不透明，離子含量為背景圖像

Question

我剛剛用 ionic 5 創建了一個空白項目，並為內容添加了背景圖像。 之后我修改了 page.page.scss 文件以使 header 透明，但它不起作用。

如果我只是為離子含量選擇背景顏色，那就行了。

請幫我。

這是我的環境：

離子：

   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 白色但不透明...

因此，如果有人已經遇到過這個問題或解決方案，它將使我和我的應用免於許多麻煩。

謝謝你，再見

Answer 1

按照以下步驟使 header 透明

在 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;
     }

Answer 2

根據離子文檔（ https://ionicframework.com/docs/api/header ），要使您的header透明，您需要將屬性模式和半透明分別設置為Z9E304D4E8DF1B74CFA00999113 。

例如：

<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”的變量，且 boolean 值為 true。

如果這不起作用，請嘗試擺脫ion-header 。

Answer 3

感謝您的幫助。 我只是成功地使 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 半透明，不透明

再次感謝你 ！

Answer 4

這是一個非常簡單的“單線”CSS 解決方案，可將透明（背景）圖像添加到 ionic 4+ 內容元素，而不會遇到透明子元素（如文本）的問題。

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

• --background: -- 操作 web 組件的 CSS (shadow DOM)
• linear-gradient(...)：為圖像增加透明度（在實際示例中為 0.2！）
• 無重復中心中心/封面：無限延伸圖像