css - 像启动画面一样的背景图像

Question

我有 2048x2048px 的初始屏幕图像。使用 this教程，我为不同的设备裁剪了它。应用程序加载后，它打开了一个主视图(带有登录页面)。我需要在此 View 中设置该图像的背景。

但是为了在加载后更改图片不明显，我需要将图片也切掉，作为初始启动画面。我该怎么做？

登录 View :

<ion-view hide-nav-bar="true" class="login-view">
  <div class="row">
    <div class="col">
      <img class="logo" src="img/logo.png">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <button class="login-btn button button-block button-dark" ng-click="Login()">
          {{'Login' | translate }}
      </button>
    </div>
  </div>
</ion-view>

我的 ion-view CSS 类:

.login-view{
  background-image: url('../img/splash.png') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

Answer 1

解决方案是将此 css 类用于背景图像 (2048x2048px)

.login-view{
  background-image: url("../img/splash.png");
    -webkit-background-size: cover;
    -moz-background-size: center cover;
    background-size: cover;
    background-position: center top;
}