实现渐变的技术，可以是全高或仅标题答案

【问题标题】：Technique to achieve gradient which can be full height or header only实现渐变的技术，可以是全高或仅标题
【发布时间】：2014-04-23 10:32:49
【问题描述】：

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

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

我怎样才能获得这种技术？

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

【问题讨论】：

猜它是一个水平渐变（从左到右或相反）和中心的径向渐变..所以可能不会随着元素的高度变化很大。

标签： html css markup semantic-markup

【解决方案1】：

Demo 标题渐变为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%;
}

【讨论】：

【解决方案2】：

您可以使用您的检查工具查看他们的 css：

 background-image:
     -webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%, rgba(84,90,182,0) 75%),
     -webkit-radial-gradient(right top, #794aa2 0%, rgba(121,74,162,0) 57%);

这有点复杂，但不是太多： 1) 你可以有多个背景，这通常可用作后备或更复杂的渐变

2）您可以使用百分比或仅使用“右上角”“底部”等名称来设置渐变的起点和“终点”，从而避免必须给出一个角度 - 所以它始终是同一件事，独立于纵横比。

值得注意的是，它们只支持 webkit（Chrome、Safari），尽管我很确定这可以在任何现代浏览器上轻松完成。

希望这能澄清一点。

【讨论】：

对于那个值得注意的部分.. ;)

【解决方案3】：

了解网络上的“视差”技术

【讨论】：

我觉得视差有点不同吧？