текст не отображается на фоне изображения

Question

Я делаю целевую страницу, и это может показаться глупым вопросом, но мои <h2> и <form> элементы не отображаются нигде на моей странице. Я пробовал все, о чем я могу думать, и все же, ничего. Я озадачен.

Фотография, которую я использую для полноэкранного фонового изображения, является одним из фотошоп с серым квадратом в центре (что похоже на то, что некоторые люди делают с z-индексом). На заднем плане это циклический логотип в js как своего рода дизайн возврата.

Я не уверен, что я делаю что-то не так, или если что-то в моем CSS, html, js делает так, чтобы текст/форма не отображались.

index.html

<section id="bg"> 
     <img src="img/bg.jpg"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12" id="rotating-img-wrapper"> 
        <img class="rotating-img" src="img/corona.png"> 
        <img class="rotating-img" src="img/mc.png"> 
        <img class="rotating-img" src="img/mtv.png"> 
        <img class="rotating-img" src="img/op.png"> 
        <img class="rotating-img" src="img/supercell.png"> 
       </div> 
      </div> 
      <div class="text"> 
       <h2>To learn more about our services, drop us a line</h2> 
       <div class="form-group"> 
       <label for="inputPassword3" class="col-sm-2 control-label">Email Address</label> 
       <div class="col-sm-10"> 
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 
       </div> 
       </div>  
      </div>    
    </section> 

CSS

#bg { 
    position: fixed; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
} 
#bg img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%; 
    min-height: 50%; 
} 

#rotating-img-wrapper img { 
    position: fixed; 
    width: 250px; 
    height: 750px; 
} 

.rotating-img { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

h2 { 
    color: #000000; 
    position: absolute; 
} 

Javascript

$(window).load(function() { 
    var InfiniteRotator = 
    { 
     init: function() 
     { 
      //initial fade-in time (in milliseconds) 
      var initialFadeIn = 1000; 

      //interval between items (in milliseconds) 
      var itemInterval = 5000; 

      //cross-fades time (in milliseconds) 
      var fadeTime = 2500; 

      //number of items 
      var numberOfItems = $('.rotating-img').length; 

      //current item 
      var currentItem = 0; 

      //show first item 
      $('.rotating-img').eq(currentItem).fadeIn(initialFadeIn); 

      //loop through the items 
      var infiniteLoop = setInterval(function(){ 
       $('.rotating-img').eq(currentItem).fadeOut(fadeTime); 

       if(currentItem == numberOfItems -1){ 
        currentItem = 0; 
       }else{ 
        currentItem++; 
       } 
       $('.rotating-img').eq(currentItem).fadeIn(fadeTime); 

      }, itemInterval); 
     } 
    }; 
    InfiniteRotator.init(); 
}); 

Если кто-то можете увидеть ошибки в моем коде, которые я не вижу, я хотел бы узнать. Спасибо за помощь.

Answer 1

У меня есть некоторое представление о том, как вы можете приблизиться к этой компоновке.

Я упростил ваш HTML немного (удалил форму и разместил в простой строке текста), так что , чтобы сосредоточиться на различных слоях укладки из-за фиксированных и абсолютно позиционированных элементов.

Ключ в том, что с вашего фиксированного элемента #bg он устанавливает опорную точку для , позиционируя любые другие позиционированные дочерние элементы, будь то фиксированные или абсолютные.

В исходном посте вы устанавливаете смещения top: -50% и left: -50%, которые помещают начало блока за пределы видимой области просмотра.

В результате h2 был расположен в верхнем левом углу #bg, следовательно, не виден, и p текста, который находится в постоянном содержимом потоке, будут также начать в верхнем левом углу контейнерного блок (#bg).

В начале, установите смещение на top: 0 и left: 0 100% для ширины и высоты, , а затем переосмыслить о том, как размер ваших изображений в ротатор изображений и фона изображения.

Теперь, когда вы видите, где находятся элементы, вы сможете сделать ход с вашей компоновкой.

body { 
 
    margin: 0; /* get rid of 10px border from default browser style sheet */ 
 
} 
 
#bg { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#bg img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    min-width: 50%; 
 
    min-height: 50%; 
 
} 
 
#rotating-img-wrapper img { 
 
    position: fixed; 
 
    width: 250px; 
 
    height: auto; 
 
} 
 
.rotating-img { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
h2 { 
 
    color: #000000; 
 
    position: absolute; 
 
    top: 30%; 
 
    left: 50%; 
 
}

<section id="bg"> 
 
    <img src="http://placehold.it/500x500"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-12" id="rotating-img-wrapper"> 
 
     <img class="rotating-img" src="http://placekitten.com/2000/4000"> 
 
     </div> 
 
    </div> 
 
    <div class="text"> 
 
     <h2>To learn more about our services, drop us a line</h2> 
 
     <p>Some other words ...</p> 
 
    </div> 
 
</section>

Answer 2

В вашем CSS изображения, сделать это в CSS:

z-index:-1000; 

Элементы управления Z-индекс, какие элементы перекрывают другие элементы. Чем выше z-индекс, тем больше будет элемент. Смотрите, если это что-то прояснит. В противном случае возникает другая проблема. Мне также любопытно, почему вы используете абсолютное позиционирование для всех этих элементов.

Answer 3

Вы можете использовать background-image: url (img/bg.jpg); в #bg, вместо того, чтобы добавлять изображение напрямую и пытаться что-то добавить на нем.

Answer 4

В CSS попробуйте этот код:

#bg { 
    background-image:url('img/bg.jpg'); 
} 

И затем удалить тег со страницы HTML. Я также хотел бы взглянуть на упрощение вашего кода, так как у вас, похоже, есть тонна div, которые все обернуты друг в друга. Возможно, подумайте о том, чтобы использовать таблицу, если она соответствует вашим потребностям.