Question

我几天前只是通过观看视频和阅读W3C中的相关教程来学习HTML和CSS。所以我可能会错过一些重要的观点。

我想通过css制作渐变背景动画。以下是我的css和html代码：

＆＃13;

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%);
}

＆＃13;

<!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>

＆＃13;

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

有人能给我一些提示吗？我会很感激。

Answer 1

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

以及

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

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

修复：

   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>

Answer 2

Body因为孩子不通过position:absolute而没有高度，所以400％的无高度在尝试调整大小时会给出0高的背景。

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

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

参与 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子元素传播背景属性的计算值。该BODY元素的背景属性的使用值是它们的初始值，并且传播的值被视为在根元素上指定它们。建议HTML文档的作者指定BODY元素的画布背景而不是HTML元素。

＆＃13;

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%);
}

＆＃13;

<!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>

＆＃13;

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

2 个答案: