2016-02-15 196 views
0

我有用於啓動畫面的圖像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> 

離子視我的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; 
} 
+1

你的問題是bi不清楚。據我所知,你的圖像出現在啓動畫面,但不是在登錄窗體上的背景,對吧? –

+0

@GokulShinde登錄表單圖像出現,但在分辨率2048x2048px,我不知道如何在我的啓動畫面中裁剪它。 – mreoer

+0

您是否使用過引導程序或任何響應主題? –

回答

0

解決方案(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; 
} 
0

開機畫面是不是你的第一頁的背景。這是一個單獨的圖像,顯​​示在您的應用程序顯示您的第一頁之前。所以如果你想使用和圖像作爲你的首頁背景,這是另一個問題。

但是如果你想加載啓動畫面,你只需要將你的鏡像複製到資源文件夾,然後運行ionic resources命令爲所有設備和平臺創建所有鏡像。 然後機器人只需要添加此代碼對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"/> 

,如果你只是想設置您的登錄背景讓我知道

+0

sry,我嚴重製定了問題..我已經有一個啓動畫面,使用教程。現在我需要設置我的登錄視圖背景,就像我的閃屏一樣。我有問題,因爲「離子資源」裁剪我的圖像爲不同的屏幕分辨率,我不明白我怎麼能在登錄視圖 – mreoer

+0

我的背景做同樣的事情,所以,你可以幫我嗎? – mreoer