Почему поле ввода не превышает фоновое изображение?

Я пытаюсь сделать простое одностраничное приложение, в котором поле ввода заголовка, нижнего колонтитула и контента (с фоновым изображением). Когда я добавил поле ввода, оно обрезало фоновое изображение. Мне нужно, чтобы поле ввода выходило за фоновое изображение. скажите, пожалуйста, где я делаю неправильно означает, как добавить поле ввода выше фонового изображения http://codepen.io/anon/pen/pvYdNM Почему поле ввода не превышает фоновое изображение?

<html ng-app="ionicApp"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <title>Ionic List Directive</title> 

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
    </head> 

    <body > 
      <ion-view> 
     <ion-header-bar class=" bar bar-positive "> 
      <h1 class="title">Title!</h1> 
     </ion-header-bar> 
     <ion-content class="bg" style="position:absolute; left: 0; right: 0; top: 43px; bottom: 43px;"> 
      <label class="item item-input"> 
       <span class="input-label">Username</span> 
       <input type="text"> 
      </label> 
     </ion-content> 
     <ion-footer-bar class=" bar bar-footer bar-positive" style="position:fixed!important"> 
      <h1 class="title">Fotter!</h1> 
     </ion-footer-bar> 
    </ion-view> 



    </body> 
</html>

источник

2015-03-30 user944513

Ваше поле ввода выше фонового изображения вы просто не можете «увидеть», потому что нет никаких границ в поле ввода. Это оставляет вас с чисто белым полем ввода на белом фоне.

Добавьте это в CSS, чтобы увидеть контуры поля ввода:

input{border:1px solid #000 !important;}

Edit: Оригинальный вопрос не был для меня ясно. ОП разъяснил, что проблема заключается в том, что белый фон полей ввода покрывает фоновое изображение. Преобразование фона в прозрачный будет решить вопрос: .item{background-color:transparent !important;}

Живого пример:

.item{background-color:transparent !important;} 
 
input{border:1px solid #000 !important;} 
 
.bar { 
 
     position: relative!important 
 
    } 
 
    .bg { 
 
     border: 1px solid red; 
 
     background: url('https://d262ilb51hltx0.cloudfront.net/max/800/1*AJALCafqXhfLMG7iF7Ho0A.jpeg')!important; 
 
     background-color: red!important; 
 
     background-repeat: no-repeat!important; 
 
     background-position: center!important; 
 
     background-size: cover!important; 
 
     
 
    }

<html ng-app="ionicApp"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
 
    <title>Ionic List Directive</title> 
 
    
 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
 
    </head> 
 

 
    <body > 
 
      <ion-view> 
 
     <ion-header-bar class=" bar bar-positive "> 
 
      <h1 class="title">Title!</h1> 
 
     </ion-header-bar> 
 
     <ion-content class="bg" style="position:absolute; left: 0; right: 0; top: 43px; bottom: 43px;"> 
 
      <label class="item item-input"> 
 
       <span class="input-label">Username</span> 
 
       <input type="text"> 
 
      </label> 
 
     </ion-content> 
 
     <ion-footer-bar class=" bar bar-footer bar-positive" style="position:fixed!important"> 
 
      <h1 class="title">Fotter!</h1> 
 
     </ion-footer-bar> 
 
    </ion-view> 
 

 
    
 
     
 
    </body> 
 
</html>

источник

2015-03-30 01:02:20 xengravity

Спасибо за ответ, но вы не получите мой вопрос, мне нужно имя пользователь и текстовое поле над фоном изображение на самом деле ваше изображение также вырезано ниже имени пользователя и текстового поля – user944513

сначала удалите это Username затем посмотрите вывод, имеющий полное фоновое изображение. Теперь добавьте имя пользователя и текстовое поле над фоном – user944513

Оригинальный вопрос мне не понятен. Фон обрезается, потому что ярлык имеет белый фон. Вы можете удалить белый фон со следующим CSS: .item {background-color: transparent! Important;}. Я обновляю свой оригинальный пост с ответом. – xengravity

Почему поле ввода не превышает фоновое изображение?

ответ

Смежные вопросы