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

Question

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

图像中的结果：

标题白色但不透明...

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

谢谢你，再见

Answer 1

按照以下步骤使标题透明

在 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

According to the ionic docs (https://ionicframework.com/docs/api/header), to make your header transparent you need the attributes mode and translucent set to ios and true respectively.

For example:

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

As the docs also mention this would not work if the device does not support backdrop-filter. Also you can do away with the html binding on translucent, unless you have a variable called "true" with the boolean value true.

If this does not workout, Try getting rid of the ion-header.

Answer 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 是否失去了这个功能......那会很奇怪而且非常糟糕......这就是为什么我认为我做错了什么......

这是图片： 标题半透明，不透明

再次感谢你 ！

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！）
• 无重复中心中心/封面：无限延伸图像