我在使背景图像按照我喜欢的方式工作时遇到了一些麻烦.
我希望背景根据窗口的宽度自动调整大小,它已经正确地执行了.如果你缩小窗口,你会看到背景缩小.
这是问题所在.如果你让你的窗户变宽(短),那么背景会调整大小并变得太高,因此你不能再看到背景的顶部(因为背景位于底部).
当你位于页面顶部时,我希望背景位于顶部位置,当你向下滚动时,它将慢慢移动到底部位置.当您左右移动时,有点像Android手机背景的效果.当然,请记住,当您使窗口变小时,我仍然希望背景自动调整大小.
HTML：
<body>
<img src="http://i.imgur.com/6d5Cm.jpg" alt="" class="background" />
<div class="banner">
<img src="http://i.imgur.com/JptsZ.jpg" alt="" />
</div>
<div class="content">
<div class="innerContent">
testing
</div>
</div>
</body>
CSS：
html
{
background-color: #70d4e3;
height: 100%;
}
body
{
height: 100%;
}
.background
{
margin-top: 45px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: -9999;
}
.banner
{
margin: 0px auto;
width: 991px;
margin-bottom: -9px;
}
.content
{
background: url("http://i.imgur.com/daRJl.png") no-repeat scroll center center transparent;
height: 889px;
margin: 0 auto;
width: 869px;
}
.innerContent
{
padding: 30px;
}
也许需要一些javascript或jquery来实现这一目标.
解决方法
我希望你不要介意我冒昧地使用百分比来让我的生活更轻松一点,并且脚本可能稍微强一些,因为我可以可靠地使用百分比浮点数.
我所做的是使布局,html和css符合bg正确动画所需的规则,它们与你所拥有的大致相同.
然后,这只是一个问题,要弄清楚正确的属性所需的计算,以确定你从顶部的百分比,* 20实际上是背景图像以百分比填充的“左”空间量(作为背景高度为80％).
他们将计算移动到一个函数,所以我可以在滚动和窗口调整大小时调用它,确保它在任何以某种方式修改窗口的事件上启动…
没有做广泛的测试,但它在Chrome中工作,我很累：p
我相信这就是你要找的东西：
http://jsfiddle.net/sg3s/RSqrw/15/参见编辑2
如果你想要这个另一种方式arround只是让页面背景从顶部开始并修改：
http://jsfiddle.net/sg3s/RSqrw/14/见编辑2
编辑：
作为奖励,因为我从未真正将jquery脚本写成’插件’,所以我决定将其转换为一个.我想出的应该易于实现和使用！
http://jsfiddle.net/sg3s/RSqrw/52/见编辑3
功能在Chrome,Firefox 3.6,IE9兼容模式下成功测试
编辑2：
再次阅读问题检查我是否做得对,我注意到我没有做你想要的,所以我更新了第一个编辑中的链接,它给你一个插件,你可以在其中有几个滚动背景选项.它保留了我的“旧”插入,同时也做了你想做的事情……阅读代码中的注释以获得一些额外的描述.
编辑3：
当我今天去上班时,我很担心我的插件“尝试”有点臃肿.正如你在评论中提到的那样,它并不符合要求.
所以我把它改写成只做你想要的,而不是更多,在Chrome Firefox,IE9 compat等测试过.这个脚本更清洁.
http://jsfiddle.net/sg3s/vZxHW/
如果高度适合窗口,您可以选择使背景粘在顶部或底部.没有别的,但这已经足以做一些非常酷的事情：p