Question

我正在尝试在目标网页上实现全屏渐变。我正在使用引导程序，并且如果我在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>

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

Answer 1

您应该使用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>

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

1 个答案: