如何使渐变在Bootstrap和CSS中占据全屏?

时间:2019-01-31 05:39:44

标签: html css css3 bootstrap-4 gradient

我正在尝试在目标网页上实现全屏渐变。我正在使用引导程序,并且如果我在CSS文件中使用HTML标记,那么它将覆盖内容结尾下方的屏幕,但是如果使用body标记,则它将覆盖内容的反面。{{3} }

/* Title Section */

#title {
  padding-top: 22%;
}

h1 {
  text-align: center;
  font-size: 60px !important;
}

.title-buttons {
  padding-top: 2%;
}

.title-btn1 {
  margin-left: 35%;
}

.title-btn2 {
  float: right;
  margin-right: 35%;
}

body {
  background-color: #FF3CAC;
  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  min-width: 100%;
  min-height: 100%;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Alec Klem</title>
  <link rel="stylesheet" href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/css/style.css">
  <!-- Bootstrap MDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>

<body>

  <section id="title" class="">
    <h1>Which website would you like to see?</h1>
    <div class="title-buttons">
      <a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/professional.html"><button type="button" class="btn btn-light btn-lg title-btn1">Professional</button></a>
      <a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/educational.html"><button type="button" class="btn btn-light btn-lg title-btn2">Educational</button></a>
    </div>
  </section>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>

</html>

我知道屏幕上的代码尚未响应,但是如果您能够全屏查看它,则应该看起来像我的屏幕截图。要使渐变色全屏显示,我需要做什么?

1 个答案:

答案 0 :(得分:2)

您应该使用height:100vh而不是100%

/* Title Section */

#title {
  padding-top: 22%;
}

h1 {
  text-align: center;
  font-size: 60px !important;
}

.title-buttons {
  padding-top: 2%;
}

.title-btn1 {
  margin-left: 35%;
}

.title-btn2 {
  float: right;
  margin-right: 35%;
}

body {
  background-color: #FF3CAC;
  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  min-width: 100%;
  min-height: 100vh;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Alec Klem</title>
  <link rel="stylesheet" href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/css/style.css">
  <!-- Bootstrap MDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>

<body>

  <section id="title" class="">
    <h1>Which website would you like to see?</h1>
    <div class="title-buttons">
      <a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/professional.html"><button type="button" class="btn btn-light btn-lg title-btn1">Professional</button></a>
      <a href="/Users/alecklem/Desktop/Web Development/MySite/MySite-Master/educational.html"><button type="button" class="btn btn-light btn-lg title-btn2">Educational</button></a>
    </div>
  </section>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>

</html>