html - 实现可以是全高或仅标题的渐变技术

Question

我正在查看 heroku 网站:https://www.heroku.com/

我很好奇他们是如何在主页上实现整页渐变并在其下方显示内容的，然后在下一页上，看似非常相似的标记，他们能够保持完全相同的部分渐变，但仅应用于顶部的导航栏。

我怎样才能得到那种技术？

• 将渐变应用于正文，然后在首页上有一个透明的 div？
• 将渐变应用到全高 div，然后在其顶部有一个透明的标题 div，主体为白色。

Answer 1

Demo header gradient as heroku

Demo 作为 heroku 的背景渐变

Demo 所有跨浏览器样式和支持的通用背景渐变

html {
    background: #1e5799;
    /* Old browsers */
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(61%, #207cca), color-stop(100%, #7db9e8));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 61%, #7db9e8 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
    /* IE6-9 */
    min-height: 100%;
}