Question

我正在为网页创建一个CSS样式表。我想要整个网页的渐变背景，但我无法弄清楚如何让渐变覆盖整个网页。现在，渐变是典型横幅的形式，通过网站向下复制，就像一个“条”在另一个上面。

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

到目前为止我的代码：

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

Answer 1

使用VH单位，这是一个垂直高度。

考虑

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

Answer 2

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

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

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

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

Answer 3

两个早期答案的组合应该有效：

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

在CSS中使用渐变背景进行不需要的复制

3 个答案: