梯度不适用于位置：绝对答案

【问题标题】：Gradient not working with position:absolute梯度不适用于位置：绝对
【发布时间】：2014-01-28 19:56:43
【问题描述】：

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

<!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 中尝试过。

【问题讨论】：

为什么需要body标签绝对定位？
因为为了简洁起见，这个例子是最小的，而我的 CSS 实际上比这更复杂。
通常你不会设置body absolute。你不能和 relative 一样吗？
将body标签绝对定位有点不寻常（我不确定它的好处）。如果您将文本放在另一个容器中并定位它，那么您应该很高兴。不要忘记给元素一些维度（使用 height 属性和 display:block）
是的，这似乎有效，非常感谢。我不太喜欢使用多余的 div，而且我仍然看不出我的代码有什么问题，但如果没有更好的选择，我会选择这个。再次感谢。

标签： css linear-gradients

【解决方案1】：

如果不设置 html 背景，则正文的背景将应用于 HTML。

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

尝试申请：html {height:100%;} 看看它做了什么：http://codepen.io/anon/pen/JGApK

【讨论】：

我仍然不明白为什么正文没有应用背景渐变 - 为什么你必须涉及包含元素？
当你制作body absolute 时，它给html 没有高度。 absolute 元素的高度不包含在其父级高度中。通常你会看到overflow，但制作body absolute 可能会导致它自己的一系列问题。这就是为什么每个人都在问为什么这不是body 内部的div 而不是；他们可能想知道你为什么要添加额外的问题来解决。

【解决方案2】：

很简单

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

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

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

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

【讨论】：

【解决方案3】：

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

html{
  position: relative;
}

【讨论】：