CSS Grid, разделяющий домашнюю страницу на две части - PullRequest
Новая
       6

CSS Grid, разделяющий домашнюю страницу на две части

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

возникли проблемы с разметкой сетки CSS.Я использовал сетку на моем уроке Введение, и он разделил мои частицы и вступительный абзац на два раздела.

Я хочу, чтобы частицы покрывали все 100vh фона

Вот скрипка: 

Notice in the fiddle, my particles arent in the background

JS Fiddle

Ответы [ 2 ]

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

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

  <div class="headerdata">      
        <p id="Introduction" class="css-typing">
            Hi, I'm <strong>Billy Bob</strong>.
        <br/><br/>
            I'm a <strong>front-end</strong> and <strong>back-end</strong> developer.
        </p>
  </div>
    <header id="particles-js">
    </header>

и ваш CSS будет похож на 

.headerdata {
    height:100vh;
    background-color:#030711e8;
    position: absolute;
    padding-top: 60px;
    width:100%;
}
header{
  position:absolute; width: 100%; 
  height: 100%;  
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: 50% 50%; 
}

https://jsfiddle.net/nimittshah/gLq56ptv/

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

Я помню, что у меня была похожая проблема с частицами.Если вы хотите, чтобы частицы были всем фоном, вот мое решение:

  • вам не следует заключать все содержимое в div частиц, div частиц должен быть закрыт

  • после того, как частицы должны идти в div, который оборачивает весь ваш контент, он должен иметь относительное положение и z-индекс больше, чем у частиц.Положение статей должно быть фиксированным.По сути, ваша HTML структура должна выглядеть так: 

.overlay {
   z-index: 100;
   position: relative;
}
#particles-js {
    position: fixed;
    height: 100%;
    width: 100vw;
    z-index: 0;
    display:grid;
    height:100vh;
    background-color:#030711e8;
}
<body>
    <div id="particles-js"></div>
    <div class="overlay">
        <p>  your introduction  </p>
        <main>  your content  </main>
    </div>  
</body>
...