Как сделать CSS-фон с линейным градиентом, чтобы заполнить весь фон без обрезки внизу? - PullRequest
Новая
       62

Как сделать CSS-фон с линейным градиентом, чтобы заполнить весь фон без обрезки внизу?

0 голосов
/ 21 июня 2019

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

Вот мой сайт: http://OmnipointStudios.com

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Omnipoint Studios</title>
  <meta name="description" content=""/>
  <link href="css/styles.css" rel="stylesheet">
  <link href="css/gradients.css" rel="stylesheet">
</head>
  <body class="">
    <div class="wrapper">
    <header>
      <nav class="website-nav">
        <ul>
          <li><a class="home-link" href="index.html">Omnipoint Studios</a></li>
          <li><a href="research.html">Research</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div class="text" align="center">
      <a class="twitter-link" href="https://twitter.com/Omnipoint"><img src="img/tweet.svg" /></a>
      <div class="text">
        <h2>Omnipoint on Twitter</h2>
        </div>

    </div>
    <br>
    <br>
        <div class="text" align="center">
        <iframe width="35%" height="500" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/808499157&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            </div>

        <div class="text" align="center">
        <iframe width="35%" height="175" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/639444903&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
        </div>

        <div class="text" align="center">
        <iframe width="35%" height="175" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/287224418&amp;color=%23ff5500&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&amp;visual=true"></iframe>
        </div>


            <a align="center" href="https://www.soundcloud.com/omnipointmusic"><h2>Music by Omnipoint</h2></a>
        </div> 

    </div>

    <footer>
      <div align='center'><a href='http://www.hit-counts.com'><img src='http://www.hit-counts.com/counter.php?t=MTQyNDM2NQ==' border='0' alt='Hit Counter'></div>
  </footer>
  </div>

  <script src="js/set-background.js"></script>
</body>
</html>

Gradient.css 

   /* Gradients */
.heaven-0 { background: #00000A; }

.heaven-1 { background: linear-gradient(to bottom, #020214 85%,#191922 100%); }

.heaven-2 { background: linear-gradient(to bottom, #020214 60%,#20202D 100%); }

.heaven-3 { background: linear-gradient(to bottom, #020214 10%,#303054 100%); }

.heaven-4 { background: linear-gradient(to bottom, #20202D 0%,#505070 100%); 
}

.heaven-5 { background: linear-gradient(to bottom, #404050 0%,#7070AA 80%,#8C78AA 100%); 
}

.heaven-6 { background: linear-gradient(to bottom, #4A4A69 0%,#7878B4 50%,#C878A0 100%); 
}

.heaven-7 { background: linear-gradient(to bottom, #7878BE 0%,#8282BE 60%,#E6B4D2 100%); 
}


.heaven-8 { background: linear-gradient(to bottom, #82AADC 0%,#F0B4B4 100%); 
}

.heaven-9 { background: linear-gradient(to bottom, #96C8FA 1%,#AAE6FF 70%,#B4B4F0 100%); 
}

.heaven-10 { background: linear-gradient(to bottom, #B4E6FF 0%,#96DCFF 100%); }

.heaven-11 { background: linear-gradient(to bottom, #9BDCFF 0%,#64D2FA 100%); }

.heaven-12 { background: linear-gradient(to bottom, #96DCFF 0%,#37A0D2 100%); }

.heaven-13 { background: linear-gradient(to bottom, #5ABEE6 0%,#236EAA 100%); }

.heaven-14 { background: linear-gradient(to bottom, #2D91BE 0%,#1E508C 100%); }

.heaven-15 { background: linear-gradient(to bottom, #2473ab 0%,#1E508C 70%,#5A7882 100%); 
}

.heaven-16 { background: linear-gradient(to bottom, #1E508C 0%,#285A8C 50%,#A0AA6E 100%); 
}

.heaven-17 { background: linear-gradient(to bottom, #1E508C 0%,#738C7D 50%,#EBD25A 100%); 
}

.heaven-18 { background: linear-gradient(to bottom, #143C78 0%,#5A6E73 30%,#E1C85A 70%,#B4643C 100%); 
}

.heaven-19 { background: linear-gradient(to bottom, #143C50 0%,#505046 30%,#C8782D 60%,#BC460F 80%, #320F05 100%); 
}

.heaven-20 { background: linear-gradient(to bottom, #051928 0%,#051928 30%,#8C3C14 80%,#230F05 100%); 
}

.heaven-21 { background: linear-gradient(to bottom, #000A0F 30%,#5A230A 80%,#280A05 100%); 
}

.heaven-22 { background: linear-gradient(to bottom, #0A0500 50%,#4B1E05 100%); }

.heaven-23 { background: linear-gradient(to bottom, #00000A 80%,#140A00 100%); }

.heaven-24 { background: #00000A; 
}

Styles.css 

 * {
    margin: 0;
  }
  html, body {
    height: 100%;
  }
  html {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Roboto, Arial, sans-serif;
    font-size: 62.5%;
    color: white;
    background: linear-gradient(to bottom, #2473ab 0%,#1e528e 70%,#5b7983 100%);
  }
  body {
    font-size: 1.8rem;
  }
  h1, h2, h3 {
    font-weight: normal;
  }
  h1 {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
  }
  a {
    color: white;
    text-decoration: none;
  }
  .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -7rem;
    position: relative;
  }
  footer, .push {
    height: 7rem;
  }

  footer .footer-contents {
    padding: 0 5rem;
    position: relative;
  }

  .website-nav {
    position: relative;
    padding: 5rem;
  }

  .website-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .website-nav ul li {
    float: left;
    padding: 0.5rem 2rem 0.5rem 0;
    line-height: 21px;
  }

  .website-nav ul li a {
    color: white;
    text-decoration: none;
  }

  .home-link {
    font-weight: bold;
  }

  .message {
    position: relative;
    padding: 0 5rem;
    margin-bottom: 3rem;
    width: auto;
  }
  .message .twitter-link {
    float: left;
    margin-right: 20px;
  }

  .message .twitter-link img {
    width: 40px;
    height: 40px;
  }

  .message .text {
    float: left;
  }

  .message:after, .website-nav:after {
    content: " ";
    display: table;
    clear: both;
  }
  .graphics {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 0;
  }
  .graphics .tower svg {
    width: calc(100vw);
    height: calc(90vh);
  }

  .graphics .cloud {
    top: 30rem;
    position: relative;

  }
  .page-content {
    padding: 1rem 5rem;
  }

  .page-content p {
    margin-bottom: 1rem;
  }

  .path {
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: dash 5s linear forwards;
  }
  @keyframes dash {
    to {
      stroke-dashoffset: 0;
    }
  }

  @media (min-height: 500px) and (min-width: 700px) {
    .message {
      padding: 0;
      width: 50%;
      left: calc(50vw - 5rem);
      top: calc(15vh - 5rem);
    }
    .message .text {
      padding-right: 0rem;
    }
    .graphics {
      display: block;
      margin-bottom: 6rem;
    }
    .message .twitter-link img {
      width: 70%;
      height: 70%;
    }
    .page-content {
      padding: 3rem 5rem;
    }
  }

  @media (min-height: 500px) and (min-width: 1240px) {
    .message {
      left: calc(50vw - 10rem);
      top: calc(25vh - 5rem);
    }
    h1 {
      font-size: 5rem;
    }
    .message .twitter-link img {
      width: 80%;
      height: 80%;
    }
  }

  @media (min-aspect-ratio: 11/5)  {
    .graphics {
      display: none;
    }
  }

Ответы [ 2 ]

0 голосов
/ 21 июня 2019

Удалите высоту: 100% от элемента html (вы можете удалить элемент для тела, поскольку он также не нужен).

Также удалите поле margin-bottom, прикрепленное к элементу html.(отсутствует в CSS, который вы разместили здесь, но он присутствует на вашем сайте)

0 голосов
/ 21 июня 2019

Линейный градиент соответствует высоте окна области просмотра , а не высоте страницы .

, потому что body {height:100%; } прочитайте этот связанный вопрос .

Чтобы исправить это: 

body {
    height: auto; /* or delete this line entirely */
    min-height: 100%;
}

Поэтому замените высоту "100%" на "авто" (чтобы перезаписать другие установленные стили CSS) или удалите height: полностью отходит от всех CSS-элементов body, поэтому:

Затем вам нужно будет добавить свойство min-height, чтобы наименьшее тело могло иметь ту же высоту, что и окно просмотра.

Пример 1;Ваша текущая настройка 

.heaven-23 {
    background: linear-gradient(to bottom, #08700A 80%,#140A00 100%);
}
body {
    font-size: 1.8rem;
    height: 100%;
}
html,body {  
    height: 100%;
}
<body class='heaven-23'>
<h1>some text</h1>
<h2>and<br>page contents</h2>
<p><BR>Colour edited to highlight changed setting....See that now the background colour extends beyond the page viewport size <BR><BR><BR><BR></p>
</body>

Пример 2;Фиксированная версия 

.heaven-23 {
    background: linear-gradient(to bottom, #08700A 80%,#140A00 100%);
}
body {
    font-size: 1.8rem;
    height: auto;
    min-height: 100%;
}
html,body {  /** << remove the body tag from here **/
    height: auto; 
    min-height: 100%;
}
<body class='heaven-23'>
<h1>some text</h1>
<h2>and<br>page contents</h2>
<p><BR>Colour edited to highlight changed setting....See that now the background colour extends beyond the page viewport size <BR><BR><BR><BR></p>
</body>
...