如何在没有Javascript的HTML/CSS背景下实现多页背景？

我在实现这个设计时遇到了麻烦，因为我被分配到了HTML/CSS中。这里是.PSD：http://www.sendspace.com/file/10wuld 如何在没有Javascript的HTML/CSS背景下实现多页背景？

这是迄今为止代码：http://jsfiddle.net/wezW4/

这里有一些视觉注意事项：http://screencast.com/t/FMq6JK5weI

，我用我的位置现在得到了坚持：相对的＃内容的背景下，它在我定位后会留下很大的空白空间。一位朋友建议采用与页面背景元素绝对定位不同的方式，但并没有取得如此大的进步。

这怎么能用我目前的方法完成？或者如果我的方法是错误的，那么正确的方法是什么？

来源

2012-07-09 guptron

我不知道你在哪里与页面背景清晰和滑块背景的东西去。背景 - 顶部/清除/滑块不能是一个图像吗？滑块实际上会在滚动时上下滑动吗？ – Vassi 2012-07-09 19:47:41

@Vassi对，那些可以合并成一个单一的图像。我将它分开，以便我可以使用重复图块来优化页面加载速度。 – guptron 2012-07-10 15:11:58

就做这样的事情：

<html> 
      <head> 
        <style> 
          #a, #b, #c {background-repeat:repeat-x;} 
          #a {background-image:url(http://dev.enhancetrade.com/prodetails/images/slider-background-5x5.jpg); background-position:center top;} 
          #c {background:white; width: 400px; margin: 0px auto;} 
          #b {background-image:url(http://dev.enhancetrade.com/prodetails/images/slider-background-5x5.jpg); background-position:center bottom;} 
        </style> 
      </head> 
      <body> 
        <div id="a"> 
        <div id="b"> 
        <div id="c"> 
           adslfijaoifje 
           adslfijaoifje 
           <p>asdjfoiajoiafeoi</p> 
           <p>asdjfoiajoiafeoi</p> 
           <p>asdjfoiajoiafeoi</p> 
           <p>asdjfoiajoiafeoi</p> 
           <p>asdjfoiajoiafeoi</p> 
           <p>asdjfoiajoiafeoi</p> 
           <p>asdjfoiajoiafeoi</p> 
           <p>asdjfoiajoiafeoi</p> 
        </div> 
        </div> 
        </div> 
      </body> 
</html>

来源

2012-07-11 17:20:32 John

谢谢，这个概念的作品。我必须在#b中嵌套#c。 #c里面的#b让它正常工作。不知道你可以像这样定位背景图像。太好了！ – guptron 2012-07-11 18:54:58

如何在没有Javascript的HTML/CSS背景下实现多页背景？

回答

相关问题