Question

我正在打开一个没有内容的HTML文件，只有完整的html框架。我通过使用此线性渐变来设置html的样式

body {
    background: linear-gradient(#e66465, #9198e5);

没有得到预期的结果

我得到了这个。

Answer 1

所以这里发生的是<html>元素很特殊。它是视口的高度，因为它必须是视口的高度，并且默认为overflow:auto;。但是，它的高度未明确定义，是由浏览器授予的。因此，梯度不知道从何处获取高度值，并且变得疯狂。

body {
  background: linear-gradient(#e66465, #9198e5);
}

如果我们给<html>元素一个明确的高度，那么一切都很好。实际上，未将<html>元素的高度设置为100％往往是导致许多问题的原因，这些问题都可以通过为<html>设置高度来解决。 min-height: 100%;也可以使用。

html {
  height: 100%;
}
body {
  background-image: linear-gradient(#e66465, #9198e5);
}

您也可以将渐变本身的高度设为100vh。

body {
  background-image: linear-gradient(#e66465, #9198e5);
  background-size: 100% 100vh;
}

Answer 2

中所述

html{
 height:100%
}
body{
 width:100px;
 height:100px;
 background:linear-gradient(red, black);
 background-repeat:no-repeat;
 height:100%
}

希望这会有所帮助！

Answer 3

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: linear-gradient(#e66465, #9198e5);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Linear gradient background</title>
</head>

<body>

</body>

</html>