我只想让背景渐变覆盖整个页面，我不确定为什么它只覆盖文本，这是我的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，它会以和开始时相同的比例重复渐变。如果有人知道如何解决这个问题或为什么会发生，请让我知道。
试试这个
body{
background: linear-gradient(to bottom left,#2600ff, #ffd9f5) fixed;
}
如果你输入fixed，它将覆盖整个body。
或查看是否有帮助使用css渐变背景填充页面
我会尝试使用视口高度(vh)和%。让div按照你想要的方式拉伸，有时需要同时使用height和min-height(或width和min-width)。
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;
}
这是一个CodePen