现有许多全屏背景拉伸脚本,我正在使用的是这个
我试图实现一种效果,即背景照片不覆盖整个屏幕,而是在屏幕左侧留下250px(为了固定边栏),并填充其余部分。重要的是要在右部分显示照片的完整宽度。
这是我正在工作的网站。正如您所看到的,背景因侧边栏而向右推移,但结果是背景的一部分被裁剪了。
http://princeseafoodrestaurant.com/dev/
任何帮助都将不胜感激!
现有许多全屏背景拉伸脚本,我正在使用的是这个
我试图实现一种效果,即背景照片不覆盖整个屏幕,而是在屏幕左侧留下250px(为了固定边栏),并填充其余部分。重要的是要在右部分显示照片的完整宽度。
这是我正在工作的网站。正如您所看到的,背景因侧边栏而向右推移,但结果是背景的一部分被裁剪了。
http://princeseafoodrestaurant.com/dev/
任何帮助都将不胜感激!
这可以在启动幻灯片时完成。使用以下设置:
jQuery(function($){
$.supersized({
fit_always : 0,
fit_portrait : 0,
fit_landscape : 0,
});
});
根据this,你可以自己做到这一点:
Supersized必须是全屏吗? 不需要! 您可以通过调整CSS文件中的#supersized样式来定义尺寸。 您将需要将所有position:fixed实例更改为position:absolute。
因此,请更改此内容:
#supersized {
display:block;
position:fixed;
left:0;
top:0;
overflow:hidden;
z-index:-999;
height:100%;
width:100%;
}
转换为:
#supersized {
display:block;
position:absolute;
left:250px;
right:0;
top:0;
overflow:hidden;
z-index:-999;
height:100%;
}
然后将任何其他的position:fixed
实例更改为position:absolute
,这样你应该就完成了。
width:100%
并在 #supersized
中添加了 right:0
,并且在 #supersized li
上设置了 position:absolute
?我已经在演示中看到这个效果(如果你在 firebug / 开发者工具中尝试它,可能需要调整屏幕大小才能正常工作)。 - Spiny Norman#supersized {
display:block;
position:fixed;
left:0;
top:0;
overflow:hidden;
z-index:-999;
height:100%;
width:100%;
margin:0;
padding:0
}