背景不会进入整个页面

Question

我只想让背景渐变覆盖整个页面，我不确定为什么它只覆盖文本，这是我的 html:

body{
  background-image: linear-gradient(to  bottom left,#2600ff  , #ffd9f5);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Loops</title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <H1> Fathom converter</h1>
      <input type="textbox" id="number">
      <input type="button" value="Feet" onclick="feets()">
      <input type="button" value="Inches" onclick="inches()">
      <input type="button" value="Centimeters" onclick="centimeters()">
      <input type="button" value="Meters" onclick="meter()">
      <input type="button" value="Yards" onclick="yardes()">
      <br>
     <p id="output">
 </body>
</html>

我试过最大化高度和宽度，使用封面等。如果我不使用 no repeat，它会以与开始时相同的比例重复渐变。如果有人知道如何解决这个问题或为什么会这样，请告诉我。

Answer 1

试试这个。

body{
  background: linear-gradient(to  bottom left,#2600ff, #ffd9f5) fixed;
}

如果你固定，它会覆盖全身。

或看看这是否有帮助Making gradient background fill page with css

Answer 2

我会尝试使用视口高度 (vh) 和 %。按照您想要的方式进行 div 拉伸有时需要同时使用高度和最小高度（或宽度和最小宽度）。

HTML

<body>
  <h1> Fathom converter</h1>
  <input type="textbox" id="number">
  <input type="button" value="Feet" onclick="feets()">
  <input type="button" value="Inches" onclick="inches()">
  <input type="button" value="Centimeters" onclick="centimeters()">
  <input type="button" value="Meters" onclick="meter()">
  <input type="button" value="Yards" onclick="yardes()">
  <br />
  <p id="output">
</body>

CSS

/* This global styling prevented an unwanted scroll bar. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(to bottom left, #2600ff, #ffd9f5);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  min-height: 100vh;
  
  padding: 2rem;
}

Here's a CodePen

背景不会进入整个页面

The background wont go to the whole page

html

css

background-image