Ionic 2: Ввод текста внутри фонового изображения - PullRequest
Новая
       7

Ionic 2: Ввод текста внутри фонового изображения

0 голосов
/ 15 сентября 2018

Привет, мне нужна помощь. Я довольно новичок в Ionic, и у меня есть текстовый ввод для входа, который должен быть внутри спроектированного поля ввода дизайн

Теперь проблема в том, что я поставилоно внутри ионного приложения Я не получаю правильные результаты ионное приложение

Изображения не подходят должным образом, и когда я настраиваю размеры и ориентацию экранов, они растягиваются или смещаются илиневерен.

Вот мой код

login.html 

<div padding-left padding-right>
    <ion-list>

      <div class="input2">
            <ion-input class="textinput" center type="text" placeholder="Username" [(ngModel)]="username"></ion-input>
      </div>


      <div class="input1">
            <ion-input class="textinput" type="password" placeholder="Password" [(ngModel)]="password"></ion-input>
      </div>

    </ion-list>
<div>

login.scss 

.input2 {
    text-align: center;
    height:50px;
    width:98%;
    background:url(../../assets/images/username_input.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
}

.input1 {
    text-align: center;
    height:50px;
    width:98%;
    background:url(../../assets/images/password_input.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
}

.textinput {
    padding-left:75px; 
    width: 80%; 
    background: none;
}

Пожалуйста, дайте мне знать, что я делаю неправильно

...