过滤器：渐变和背景：固定

Question

代码：

body { background-attachment: fixed !important; filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#000000,endColorStr=#3d3c3c); }

渐变在 IE8 中不会保持固定，而是滚动到纯白色背景中。渐变在 Firefox 和 Chrome 中保持固定并随页面滚动。

有没有办法在 IE8 中也有 fixed ？我什至不知道这是一个问题（根据 Google 找不到任何东西）。

编辑：我使用上面的代码（以及相当多的 Lorem Ipsum）创建了一个测试页面，并且背景已按应有的方式固定。所以它一定是我的布局中的东西。

Answer 1

看起来你所缺少的只是在身体上设置一个高度。在 IE 8 中添加这种样式对我有用：

html, body {height: 100%}

所以，使用你的小提琴风格，它看起来像这样：

html, body {height: 100%}
body {
    background-attachment: fixed !important;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
}

这就是跨浏览器版本的样子：

html, body {height: 100%}
body {
    background-attachment: fixed !important;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
    background-image: -moz-linear-gradient(center top -90deg, #000000, #ffffff);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ffffff));
}

显然，您可以将 IE 特定代码放在其他地方并有条件地加载它，等等。

这在 IE 8、Firefox 3.6、Chrome 9 和 Safari 5 (Webkit) 中测试良好，但在 Opera 中不起作用。对于 Opera、SVG 还是实际背景图片？