当我在 body 元素中将 margin 属性设置为零时，我得到了错误的背景答案

【问题标题】：I got a wrong background when I set the margin property to zero in the body element当我在 body 元素中将 margin 属性设置为零时，我得到了错误的背景
【发布时间】：2017-07-16 13:51:11
【问题描述】：

我前几天刚学习HTML&CSS，通过看视频和阅读W3C的相关教程。所以可能我错过了一些重要的点。

我想用css做一个渐变背景动画，下面是我的css和html代码：

body{
  margin: 0;
	background: linear-gradient(132deg,#ec5218,#1665c1);
	background-size: 400% 400%;
	animation: BackgroundGradient 30s ease infinite;
}

@keyframes BackgroundGradient{
	0%{background-position: 0% 50%;}
	50%{background-position: 100% 50%;}
	100%{background-position: 0% 50%;}
}

h1{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

<!doctype html>
<html>
  <head>
       <title>Gradiendt Background</title>
       <link rel="stylesheet" type="text/css" href="css/style.css"> 
  </head> 

  <body>
       <h1>There is a gradient background.</h1>
  </body>
</html>

当我运行代码时，我得到一个白色背景而不是线性渐变背景。但是如果我在 body 元素中将背景属性设置为单一颜色，比如蓝色，它确实有效。或者我设置了边距属性设置为非零值，比如 1px，我会得到我想要的正确的线性渐变背景。所以也许我真的想念……。

谁能给我一些建议？我将不胜感激。

【问题讨论】：

标签： html css

【解决方案1】：

Body 没有高度，因为孩子通过position:absolute 离开了流。所以当你尝试调整它的大小时，400% 的没有高度会给出 0 高度的背景。

您可以安全地将 min-height:100vh 设置为 body 以覆盖视口，即使背景设置为 HTML，它也会显示。

否则，如果html 没有背景定义，任何min-height 值都足以覆盖视口。

查看https://www.w3.org/TR/css3-background/#special-backgrounds以了解background在涉及html和/或body时的行为。

3.11.2。画布背景和 HTML 元素

对于根元素是 HTML HTML 元素 [HTML401] 或 XHTML html 元素 [XHTML11] 的文档：如果根元素上 'background-image' 的计算值为 'none' 并且它的 'background-color'是“透明的”，用户代理必须改为从该元素的第一个 HTML BODY 或 XHTML 主体子元素传播背景属性的计算值。该 BODY 元素的背景属性的使用值是它们的初始值，并且传播的值被视为在根元素上指定了它们。建议 HTML 文档的作者为 BODY 元素而不是 HTML 元素指定画布背景。

body{
  margin: 0;
	background: linear-gradient(132deg,#ec5218,#1665c1);
	background-size: 400% 400%;
	animation: BackgroundGradient 30s ease infinite;
  min-height:100vh;
}

@keyframes BackgroundGradient{
	0%{background-position: 0% 50%;}
	50%{background-position: 100% 50%;}
	100%{background-position: 0% 50%;}
}

h1{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

<!doctype html>
<html>
  <head>
       <title>Gradiendt Background</title>
       <link rel="stylesheet" type="text/css" href="css/style.css"> 
  </head> 

  <body>
       <h1>There is a gradient background.</h1>
  </body>
</html>

【讨论】：

太棒了！感谢您的解释，链接让我有更好的理解。

【解决方案2】：

您为h1 元素定义了position:absolute; 属性，因此该元素已从文档的正常流程中完全删除。

还有，

您为body 设置了margin:0 这导致body 的高度等于0，因此不显示背景。（正文的默认边距为8px）。

要修复它，请为 body 定义 min-height：

修复它：

   body {
       min-height: 1px;
       margin:0;
       //more code...
    }

body{
  margin:0;
  min-height: 1px;
  background: linear-gradient(132deg,#ec5218,#1665c1);
  background-size: 400% 400%;
  animation: BackgroundGradient 30s ease infinite;
}

@keyframes BackgroundGradient{
  0%{background-position: 0% 50%;}
  50%{background-position: 100% 50%;}
  100%{background-position: 0% 50%;}
}

h1{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

  <body>
       <h1>There is a gradient background.</h1>
  </body>

【讨论】：

首先，感谢您的回答解决了我的问题。但是您的解释中可能有一个奇怪的地方。线性渐变背景不是背景颜色值但是一个background-image值。即使body没有高度，color仍然可以反射出来。