html - 我希望我的正文渐变在我的标题渐变之后开始

Question

我希望正文渐变从标题渐变结束的正下方开始。

这是所有相关代码：

CSS：

#header
{
    position:absolute;
    top:0;
    left:0;
    background:linear-gradient(#fff,#000); 
    height:50px;
    width:100%;
}
html
{
    height:100%;
}
body
{
    background:linear-gradient(#000,#fff);
}

HTML：

<div id = header></div>

我试过弄乱 bottom-margin ，但没有任何运气。任何帮助表示赞赏。

Answer 1

您可以使用容器 div 来执行此操作。

http://codepen.io/匿名/pen/4070/1

Answer 2

另一种方法是在标题上添加第三个渐变，以便更平滑地过渡到正文的线性渐变。

例如：background:linear-gradient(#fff, #000, #232323);对于您的标题。