CSS中带有渐变背景的不需要的重复答案

【问题标题】：Unwanted duplication with gradient background in CSSCSS中带有渐变背景的不需要的重复
【发布时间】：2015-03-31 00:50:00
【问题描述】：

我正在为网页创建 CSS 样式表。我想要整个网页的渐变背景，但我不知道如何让渐变覆盖整个网页。目前，渐变采用典型横幅的形式，在整个网站中向下复制，就像一个“条”在另一个之上。

关于如何解决这个问题的任何想法？

我目前的代码：

body {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FBFF94), color-stop(1, #00A3EF));
}

【问题讨论】：

尝试使用 background-size:cover;

标签： css background-image linear-gradients

【解决方案1】：

使用垂直高度单位，即垂直高度。

考虑

100vh = 100%。

body {

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FBFF94), color-stop(1, #00A3EF));

    height:100vh; /* vh = Vertical Height */
}

Example Here

【讨论】：

实际上，如果有水平滚动条，100vh 并不等于 100%。缩写是视口高度。
不要提及height，而是使用background-size: auto 100vh。

【解决方案2】：

两个早期答案的组合应该可以工作：

body {
min-height: 100vh;
background: -webkit-linear-gradient(to left bottom, #FBFF94, #00A3EF);
background: linear-gradient(to left bottom, #FBFF94, #00A3EF);
}

或者：

body {
height: 100vh;
background: -webkit-linear-gradient(to left bottom, #FBFF94, #00A3EF);
background: linear-gradient(to left bottom, #FBFF94, #00A3EF);
background-attachment: fixed;
}

【讨论】：

【解决方案3】：

height 未在 body 上设置。这应该会有所帮助：

body{
  height:100%;
  background:linear-gradient(to left bottom, #FBFF94, #00A3EF);
}

也许你还想要另一个margin:0;。

但是再次使用% 代替height 并不总是成功的，这就是为什么你可能想要使用vh 来代替。

【讨论】：

我想知道为什么我在那个答案上赢得了反对票。如果是因为% 单元和vh 单元：我已经添加了。
不是很正确的答案，但真的不值得投反对票（不是我，我会平等的）。渐变的语法至少要好得多。
问题是：我尝试了我的代码，它对我有用，所以我提交了它......