css - 过滤器 : gradient and background: fixed

Question

代码:

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

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

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

编辑:我用上面的代码(和相当多的 Lorem Ipsum)创建了一个测试页面，并且背景被修复了，就像它应该的那样。所以它一定是我布局中的东西。

Answer 1

看起来您所缺少的只是在 body 上设置一个高度。在 IE 8 中添加此样式对我有用:

html, body {height: 100%}

因此，使用您的 fiddle 风格，它看起来像这样:

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 或实际背景图像？