Question

我正在尝试使用线性渐变作为页面的背景。渐变没有显示，背景保持白色。这是重现问题的最小代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <style type="text/css">
    body
    {
        width:100%;
        margin-left:-50%;
        position:absolute;
        left:50%;
        background: rgb(0, 0, 0);
        background: -moz-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
        background: -webkit-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
        background: -o-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
        background: -ms-linear-gradient(270deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);
        background: linear-gradient(0deg, rgb(0, 0, 0) 1%, rgb(21, 126, 250) 99%);

    }
    </style>
</head>
<body>

    This is a test and a bad one at that.

</body>
</html>

现在，如果我删除position:absolute，则渐变有效。我究竟做错了什么？我需要position:absolute，所以我该怎么办？

修改：在Chrome和Firefox中尝试过此操作。

Answer 1

如果您没有设置html背景，则会将正文背景应用于HTML。

由于body是绝对的，因此它的HTML大小为0，并且不会触发任何HTML布局。

尝试申请：html {height:100%;} 并看看它的作用：http://codepen.io/anon/pen/JGApK

Answer 2

很容易

您只需将background-attachment: fixed !important;添加到body和/或height:100%添加到html。

做了一个小提琴：http://jsfiddle.net/filever10/NA7a6/

虽然任一选项都会将背景从body切换为html，因此将背景直接放在html上可能是更好的解决方案，因为它会去无论如何。

像这样：http://jsfiddle.net/filever10/nRLNb/

Answer 3

您可以将position: relative;添加到父元素，在您的情况下是html标记。

html{
  position: relative;
}

不使用位置的渐变：绝对

3 个答案: