滤波器：梯度和背景：固定

代码：滤波器：梯度和背景：固定

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

梯度不保持固定在IE8但滚动到一个纯白色背景。渐变在Firefox和Chrome中保持不变，并随页面一起滚动。

在IE8中有没有办法让它变成fixed？我甚至不知道这是一个问题（根据谷歌找不到任何东西）。

编辑：我用上面的代码创建了一个测试页面（和很多Lorem Ipsum），并且背景被固定了。所以它必须是我的布局中的东西。

来源

2011-02-17 Zydeco

我有IE 8.0.6001.18702和使用你的代码，滚动内容，渐变保持固定为我。我从来没有看到过白色的背景。由于所使用的过滤器只能在IE中工作，因此我认为您用于Firefox和Chrome的方法并不相关。你能提供一个演示你的问题的小提琴吗？ – Nimrod 2011-02-17 02:05:54

相关可能不会，但非常烦人，因为Moz和Webkit的样式以我想要的方式工作。 http://jsfiddle.net/g83DW/为小提琴，但真的我不知道它之间的代码我上面发布和那之间有什么区别。虽然我会说，即使小提琴是一个很好的例子，因为渐变从预览的顶部到底部，并且滚动而不是在“窗口”中显示整个渐变并保持固定。 – Zydeco 2011-02-17 02:17:17

看起来你所缺少的就是在身体上设置一个高度。添加这种风格在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或实际背景图片？

来源

2011-02-17 18:44:09 Nimrod

滤波器：梯度和背景：固定

回答

相关问题