背景图像，如闪屏

Question

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

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

登录视图：

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

Answer 2

启动画面不是您第一页的背景。这是一个单独的图像，在您的应用程序显示您的第一页之前显示。所以如果你想使用和图像作为你的第一页背景，这是另一个问题。

但如果您想加载启动画面，您只需将图像复制到资源文件夹，然后运行 ​​ionic resources 命令为所有设备和平台创建所有图像。 那么对于 android 只需将此代码添加到 config.xml

<feature name="SplashScreen">
  <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
</feature> 

并设置此属性：

  <preference name="ShowSplashScreen" value="true" />
  <preference name="SplashScreen" value="screen"/>  /*my original file name is screen.png */
  <preference name="SplashScreenDelay" value="3000"/>
  <preference name="AutoHideSplashScreen" value="true" />
  <preference name="SplashShowOnlyFirstTime" value="false" />
  <preference name="FadeSplashScreen" value="false"/>

如果您只想设置登录背景，请告诉我