Question

我有一个使用渐变的网站：

#grad {
    background: -webkit-linear-gradient(#87a0b4 80%, #6b88a1);
    background: -o-linear-gradient(#87a0b4 80%, #6b88a1);
    background: -moz-linear-gradient(#87a0b4 80%, #6b88a1);
    background: linear-gradient(#87a0b4 80%, #6b88a1);
}

<body id="grad">

我遇到的问题是，如果页面比我的标准窗口高得多（我确定这在不同的屏幕上会有所不同），则渐变会重置。

问题可以在这里看到：

http://overactiverexburg.com/Sage/bios.php

如何解决此问题，以便渐变始终在底部结束，无论页面结束多长时间？

Answer 1

尝试将background-attachment: fixed和height: 100%添加到#grad

Answer 2

替换现在看起来像这样的容器类：

      .container {
         width: 980px;
        height: 1000px;
      }

这个

.container {
   width: 980px;
   height: 100%;
}

只需更改高度即可填写100％

Answer 3

只需使用

background-attachement: fixed;

渐变背景CSS页面的全高

3 个答案: