Firefox中的CSS渐变不是静态的答案

【问题标题】：css gradient not static in firefoxFirefox中的CSS渐变不是静态的
【发布时间】：2011-09-16 19:37:19
【问题描述】：

第一次发帖，希望有人能帮忙。

我在一个使用 ajax 的页面上有一个渐变背景（并且在调用之后变得很长）。

在 IE（版本 9）中，当我向下滚动时，渐变背景保持不变，但在 Firefox（版本 6）中，对于一个正常的页面长度，渐变是正确的，但当我向下滚动时，背景渐变会重复。

有什么方法可以让 firefox 做和 IE 一样的事情（无论我滚动多远都保持不变？

这是我与渐变相关的 css：

html {
    background-color: #8c827a;
    height: 100%;
    margin: 0 0 1px;
    padding: 15px;

    /* Mozilla: */
    background: -moz-linear-gradient(top, #8c827a, #2B2825);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
                left top, left bottom, from(#8c827a), to(#2B2825));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#8c827a', EndColorStr='#2B2825', GradientType=0);
}

【问题讨论】：

如果删除 height: 100% 会发生什么？
渐变完全消失。
发布一个 jsfiddle，这样我们就可以有更多的上下文（就像导致问题的 CSS 和 HTML 的其余部分一样）(jsfiddle.net)

标签： css ajax background gradient

【解决方案1】：

要使其他浏览器的行为与 Internet Explorer 相同，可以将背景设为fixed：

html {
    background-attachment: fixed
}

确保将 background-attachment 放在两个 background 声明之后。

【讨论】：

解决了，非常感谢。我实际上检查过，它发生在任何页面上，而不仅仅是使用 ajax 的页面。再次感谢。
啊，确保 background-attachment:fixed 是在后台声明为我在 Firefox 中修复它之后，谢谢！

【解决方案2】：

添加这个 CSS：

background-attachment: fixed;

此属性“固定”浏览器视口的背景。

【讨论】：