让超大背景幻灯片图像不覆盖全屏？答案

【问题标题】：To have Supersized background slideshow image not cover the full screen?让超大背景幻灯片图像不覆盖全屏？
【发布时间】：2013-10-22 09:30:03
【问题描述】：

那里有许多全屏背景拉伸脚本。我正在使用这个http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/

我试图实现这样的效果，而不是背景照片覆盖全屏，而是在屏幕左侧留下 250 像素（用于固定侧边栏），而背景填充其余部分。重要的是要在屏幕右侧显示照片的整个宽度。

这是我正在开发的网站。如您所见，背景被侧边栏宽度推到右侧，但部分背景被截断。

http://princeseafoodrestaurant.com/dev/

任何帮助将不胜感激！

【问题讨论】：

你说的是哪个背景图

标签： jquery css

【解决方案1】：

根据this，你可以自己做：

超大尺寸必须全屏吗？没有！您可以定义通过调整 CSS 文件中的 #supersized 样式来调整尺寸。你将要使所有位置实例：固定-> 位置：绝对。

所以，改变这个：

#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，您应该已经设置好了。

【讨论】：

谢谢诺曼。我以前试过。但这所做的是将整个背景向右推 250 像素..所以部分背景图像将被推离屏幕。
您是否删除了width:100% 并在#supersized 上包含right:0，并在#supersized li 上设置position:absolute？我在演示中看到了这个工作（如果你在 firebug / 开发人员工具中尝试，你可能需要调整屏幕大小才能工作。

【解决方案2】：

使用这个：

#supersized {  
    display:block; 
    position:fixed; 
    left:0; 
    top:0; 
    overflow:hidden; 
    z-index:-999; 
    height:100%; 
    width:100%; 
    margin:0;
    padding:0
}

【讨论】：