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

Question

码:

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

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

有没有办法fixed在IE8中拥有它？我甚至不知道这是一个问题(根据谷歌找不到任何东西).

编辑:我创建了上面的代码(和相当多的Lorem存有的)测试页,背景是固定的像它应该是.所以它必须是我布局中的东西.

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