绝对定位div的背景图片在滚动时被裁剪

Question

绝对定位div的背景图片在滚动时被裁剪

4

我知道还有其他类似的帖子，但我找不到一个确切的答案...所以...

我想创建一个jQuery幻灯片播放，其中背景图片淡入淡出，所以我创建了一个填充整个屏幕的div，并放置其他元素（例如菜单）在其上方。但是当我将视口缩小到小于菜单高度并向下滚动时，我会得到一个颜色块从我的图像上移动。我已经尝试了我能想到的一切来解决这个问题，但我完全陷入了困境。

这是一个简化版本。红色块是图像的位置，黑色是背景颜色，菜单为灰色。 CSS：

body, html {
    margin: 0px;
    padding: 0px;
    height: 100%;
    background-color: #000000;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 1em;
    line-height: 1em;
    color: #9E9E9E;
    position: relative;
}
body {
    text-align: center;
}
* {padding: 0px; margin: 0px}
#wrap {
    width: 100%;
    min-height: 100%;
    background-color: #900;
    position: absolute;
    z-index: 1000;
}
#menu_wrap {
    width: 390px;
    min-height: 100%;
    background-color: #656262;
    position: absolute;
    z-index: 9999;
    background: rgb(101, 98, 98);
    background: rgba(101, 98, 98, 0.9);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
}
#menu_wrap #menu_content {
    padding: 40px;
    height: 500px;
}

HTML：

<div id="wrap"></div>

<div id="menu_wrap">
    <div id="menu_content">Menu content goes here - it could be any height.</div>Menu extends to here.
</div>

任何帮助都将不胜感激。也许是我错过了一些非常简单的东西，但我感觉自己像撞在了一堵墙上。谢谢。

- Kama

另一种选择是在 #wrap 上使用 position: fixed 吗？ - sphair

搞定了！我就知道它一定很简单 - 真是太棒了。谢谢。 - Kama

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alfalfamale · Accepted Answer

这里是一个 jsfiddle 链接，我认为它可以做到你想要的效果。

http://jsfiddle.net/Alfalfamale/dCgRW/1/

你的设置问题在于包裹 div 的最小高度（100%）始终是其父元素的高度，即 body 元素，而 body 元素始终只有视口大小。

为了解决这个问题，我将菜单移动到了 wrap 内，并使其浮动而不是绝对定位。这样，菜单就保持了文档的“流动性”，并占据了 #wrap 中的空间。其次，我们向 wrap 添加了 overflow: hidden，从本质上清除了左侧菜单。

我可能留下了一些在 float 设置中不必要的样式，我相信你可以自己挑选出来 :)