Fake background transparency/effects without fixed positioning
I'm trying to emulate this effect: http://meyerweb.com/eric/css/edge/complexspiral/demo.html o开发者_运维技巧n my blog: http://segment6.blogspot.com/
It works, but with one problem: Firefox lags really badly scrolling the page. If I make the background attachment not "fixed", it no longer lags, but the effect doesn't work. Can this effect be achieved without fixed positioning or the lag somehow cured?
I've tried using background-position with percentages but it seems to position based on the width of the element, not the width of the page, so I can't line it up correctly for varying window sizes.
You could wrap your complete body content in an additional DIV:
<body>
<div id="content-container>
...
</div>
</body>
Then you set the following styles in CSS:
html, body {
overflow:hidden;
height:100%;
}
div#content-container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
}
Now it is the wrapping container DIV which carries the scroll bars. Thus the body with the background image will stay fixed when scrolling the content.
加载中,请稍侯......
精彩评论