Question

我需要能够在整个页面中添加渐变和拉伸。但是，由于某种原因，渐变在每个部分都不断重复。我尝试过min-height: 100%，删除height:100%，添加height:auto;在包装器或正文中添加渐变而不是html。然而，做这些事情为我带来了容器和身体的布局。围绕这个最好的方法是什么？ 我需要保留height: 100%

    html {
      color: #222;
      font-size: 1em;
      line-height: 1.4;
      height: 100%;
      background: linear-gradient(tomato, crimson);
      background-repeat: no-repeat;
      //background-size: cover;
      //background-size: auto, cover;
      //background-position: top left, center;
      //b
}

https://codepen.io/ke1993/pen/OXqYYm

Answer 1

将html css更改为：

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  background: linear-gradient(tomato, crimson);
}

这将删除高度并使其自动运行到页面大小。然后渐变将自动混合。

Answer 2

将整个代码包装到包装器中，就像我在 Codepen 中完成的那样，包装器具有类page-wrapper并将gradient分配给该类。

我已在Codepen

中进行了更改

.page-wrapper {
  background: -webkit-linear-gradient(tomato, crimson);
  background: linear-gradient(tomato, crimson);
}

Answer 3

将你的Css改为此，你可以保持身高：100％;

 html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  height:100%;
}

html, body {
  //height: 100%;
  margin: 0;
  background: linear-gradient(tomato, crimson);

}

https://codepen.io/mhadaily/pen/qNvzmb

ScrollMagic和整页背景

3 个答案: