如何在 Ionic 4 中设置背景图像答案

【问题标题】：How to set a background image in Ionic 4如何在 Ionic 4 中设置背景图像
【发布时间】：2019-07-24 14:45:58
【问题描述】：

如何在 Ionic 4 中设置背景图像？试了好几种方法都没用。

我正在学习本教程： https://javebratt.com/ionic-firebase-tutorial-auth/

我也试过了

--background: #fff url('../../assets/images/cover.jpg') 无重复中心中心/封面； }

任何帮助将不胜感激。我正在使用 Ionic 4

ion-content {
  .background{
        background-image: url('../../../assets/img/login-image.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
  }
form {
  margin-bottom: 32px;
  button {
    margin-top: 20px !important;
  }
}

p {
  font-size: 0.8em;
  color: #d2d2d2;
}

ion-label {
  margin-left: 5px;
}

ion-input {
  padding: 5px;
}

.invalid {
  border-bottom: 1px solid #ff6153;
}

.error-message {
  min-height: 2.2rem;
  ion-label {
    margin: 2px 0;
  }
}
}

<ion-content class="background">
<form [formGroup]="loginForm">
  <ion-item>
    <ion-label position="stacked">Email</ion-label>
    <ion-input
      formControlName="email"
      type="email"
      placeholder="Your email address"
      [class.invalid]="!loginForm.controls['email'].valid &&
      loginForm.controls['email'].touched"
    >
    </ion-input>
  </ion-item>
  <ion-item
    class="error-message"
    *ngIf="!loginForm.controls['email'].valid &&
       loginForm.controls['email'].touched"
  >
    <ion-label>Please enter a valid email address.</ion-label>
  </ion-item>

  <ion-item>
    <ion-label position="stacked">Password</ion-label>
    <ion-input
      formControlName="password"
      type="password"
      placeholder="Your password"
      [class.invalid]="!loginForm.controls['password'].valid&& loginForm.controls['password'].touched"
    >
    </ion-input>
    </ion-item>
  <ion-item
    class="error-message"
    *ngIf="!loginForm.controls['password'].valid
      && loginForm.controls['password'].touched"
  >
    <ion-label>Your password needs more than 6 characters.</ion-label>
  </ion-item>

  <ion-button (click)="loginUser(loginForm)" expand="block" [disabled]="!loginForm.valid">
    Log In
  </ion-button>
</form>

<ion-button expand="block" fill="clear" routerLink="/signup">
  Create a new account
</ion-button>

<ion-button expand="block" fill="clear" routerLink="/reset-password">
  I forgot my password ????
</ion-button>
  <ion-footer no-shadow>
    <div>
      <button ion-button icon-left block>
              Login with Google
      </button>
    </div>
      <div>
      <button ion-button icon-left block>
        Login with Facebook
      </button>
    </div>
  </ion-footer>
</ion-content>

【问题讨论】：

图片路径是否正确？您是否在控制台中收到任何错误，例如无法获取图像？
是的，它是正确的。无论如何，当我改变它时，就会出现控制台错误。

标签： html css ionic-framework ionic4

【解决方案1】：

让我们试试这些步骤，看看效果如何：

您可以直接在 CSS 中选择 ion-content，而不是创建另一个 CSS 类。我假设您需要一个页面的背景图像。所以通过 ion-content 元素抓取整个页面。然后使用常用的 CSS 属性作为元素背景。但是在使用 Ionic 时，请确保相对路径的格式不正确。例如，我认为您的资产（图像）路径不正确。这就是为什么 ionic 无法在设备上渲染/找到它的原因。我在下面给出的代码 sn-p 对我有用。

 page-details {
     ion-content {
      --background: none;
      background-image: url("assets/imgs/img_bg_floral.png");
      -webkit-background-image: url("../../assets/imgs/img_bg_floral.png");          
      background-repeat: no-repeat;
      background-size: cover;
     }

【讨论】：

那也没用。我很确定相对路径是正确的，因为我稍微改变了它并在图像无法访问时收到错误。
很高兴知道您找到了解决方案。

【解决方案2】：

成功了

ion-content {
  --background: #fff url("../../../assets/img/login-image.jpg") no-repeat center center / cover;
}

【讨论】：

【解决方案3】：

如果您需要更多控制，请先将 css 变量 --background 设置为 none，然后指定常用 css 属性：

ion-content {
  --background: none;
  background-image: url('../../../assets/img/login-image.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

【讨论】：

【解决方案4】：

这在浏览器和真实设备上都有效：

 --background: url('/assets/recover_form_bg.jpg') no-repeat center/cover fixed;

请勿使用 ../../../assets 路径作为图像，因为它不适用于真实设备。

【讨论】：

【解决方案5】：

我已经在 android 中测试过。它对我来说工作正常。

SCSS：

ion-content {
  --background: #34B0D2 url('../../assets/yourimage.jpeg') no-repeat center top fixed;
  background-size: cover;      
}

【讨论】：