IONIC 5 离子头不透明，离子内容中有背景图像答案

【问题标题】：IONIC 5 ion header not transparent with a background image in ion-contentIONIC 5 离子头不透明，离子内容中有背景图像
【发布时间】：2020-12-05 15:17:04
【问题描述】：

我刚刚使用 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...

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

谢谢再见

【问题讨论】：

标签： css ionic-framework transparent ionic5 ion-header

【解决方案1】：

这是一个非常简单的“单线”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！）
不重复的中心中心/封面：无限延伸图像

【讨论】：

【解决方案2】：

按照以下步骤使标题透明

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

【讨论】：

【解决方案3】：

感谢您的帮助。我只是成功地使标题半透明但不透明..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

再次感谢您！

【讨论】：

【解决方案4】：

根据 ionic 文档 (https://ionicframework.com/docs/api/header)，要使标题透明，您需要将属性 mode 和 translucent 设置为 ios和 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。

【讨论】：