CSS渐变在Firefox中不是静态的。

Question

首次发帖-希望有人能够提供帮助。

我在一个使用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);
}

- Tristan

---

如果您删除 height:100%，会发生什么？ - cdeszaq

梯度完全消失了。 - Tristan

请发布一个 jsfiddle，这样我们就可以获得更多上下文信息（例如导致问题的其余 CSS 和 HTML）（http://jsfiddle.net/）。 - cdeszaq

Answer 1

为了使其他浏览器与Internet Explorer的表现一致，您可以将背景设置为fixed。

html {
    background-attachment: fixed
}

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

- thirtydot

---

搞定了，非常感谢。我实际上检查了一下，它发生在任何页面上，而不仅仅是使用ajax的页面。再次感谢。 - Tristan

啊，在背景声明后面加上background-attachment:fixed，这样在Firefox中就可以解决了，谢谢！ - illinoistim

Answer 2

请添加以下CSS代码：

background-attachment: fixed;

这个属性将背景图固定在浏览器视口。

- Rob W