свойство min-height не работает должным образом - PullRequest
Новая
       8

свойство min-height не работает должным образом

0 голосов
/ 23 марта 2020

Я начал погружаться в HTML / CSS на прошлой неделе, и я изучал несколько проектов, которые мне показались интересными для развития моих навыков, и одним из них было создание базового параллакса c . эффект .

Проблема в том, что когда я использую min-height:100%; для определения моей первой высоты изображения, изображение не появляется на веб-странице, и я изо всех сил пытаюсь найти решение в Интернете. 

    <!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title>Estudo Navbar</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header> 
      <img class="logo" src="_images/logo.svg">
      <nav>
        <ul class="nav-links">
          <li><a href="#"">Services</a></li>
          <li><a href="#"">Projects</a></li>
          <li><a href="#"">About us</a></li>
        </ul>
      </nav>
      <a class=cta href="#"> <button>Contact</button></a>
    </header>
    <section class=caixa-parallax>

      <div class="pimg1">
        <div class="ptext">
          <span class="border">
            Bem vindo(a)!
          </span>
        </div>
      </div>

      <section class="section-light">
        <h2>Section One</h2>
        <p>
          Lorem ipsum dolor
        </p>
      </section>

      <div class="pimg2">
        <div class="ptext">
          <span class="border">
            Image 2 Text
          </span>
        </div>
      </div>

      <section class="section-dark">
        <h2>Section Two</h2>
        <p>
          Lorem ipsum dolor
      </section>

      <div class="pimg3">
        <div class="ptext">
          <span class="border">
            Section 3 Text
          </span>
        </div>
      </div>

      <section class="section-3">
        <h2>Section Three</h2>
        <p>
          Lorem ipsum dolor
        </p>
      </section>
    </section>
  </body>
</html>

    @import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap');

body:not(header), html:not(header){
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family:"Montserrat", sans-serif;
    font-weight:400;
    line-height: 1.8em;
    color:white;

}

* {
    box-sizing: border-box;
    margin:0;
    padding:0;
    background:#24252A;
}

a:link{
    color:#ecf0f1;
}

a:visited{
    color:#ecf0f1:none;
}

li, a, button { 
    font-family:"Montserrat", sans-serif;
    font-weight:500;
    font-size:16px;
    color: #ecf0f1;
    text-decoration:none;
}

header{
    display:flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 10%;
}

.logo{
    cursor:pointer;
    margin-right:auto;
}

.nav-links{
    list-style:none;
}

.nav-links li{
    display:inline-block;
    padding: 0 20px;
}

.nav-links li a{
    transition: all 0.3s ease 0s;
}

.nav-links li a:hover{
    color: #0088a9
}

button {
    margin-left:30px;
    padding: 9px 25px;
    background: rgba(0,136,169,1);
    border:none;
    border-radius: 50px;
    cursor:pointer;
    transition: all 0.3 ease 0s;
}

button:hover {
    background: rgba(0,136,169,0.8);
}

.pimg1{
    background-image:url('../2/images/image1.jpg');
    min-height:100%;
}

.pimg2{
    background-image:url('../2/images/image2.jpg');
    min-height:400px;
}

.pimg3{
    background-image:url('../2/images/image3.jpg');
    min-height:400px;
}
...