全屏背景图片；内容不滚动

Question

全屏背景图片；内容不滚动

5

我已经使用CSS实现了一个完整的非滚动背景图像。然而，当内容本身超出页面时，没有滚动条出现，也无法看到内容。我尝试在我的一些div中使用各种变化的"overflow: scroll"，但是都没有成功；滚动条出现了，但它们不能滚动，或者不能正确地滚动。我认为我的div可能存在结构问题，但我对CSS并不是特别熟悉，在StackOverflow上也找不到类似的线程。 http://jsfiddle.net/YXp5p/

<body>

<div id="bg">
    <img src="images/background.jpg">
</div>

<div id="wrapper">
    <div id="header">
        thread #6bUp0
    </div>

    <div id="sidebar">
        <div id="content">
            <div id="post">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec erat ante, placerat accumsan aliquam at, rhoncus eget nunc.
            </div>
        </div>
    </div>

</div>

</body>

body{
    margin: 0px;
    color: #000;
    font-family: helvetica, times;
    font-size: 16px;
}

#bg {
    position:fixed; 
    top:-50%; 
    left:-50%;
    width:200%; 
    height:200%;
}
#bg img {
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    margin:auto; 
    min-width:50%;
    min-height:50%;
}

#wrapper {
    position: fixed;
    top:0%; 
    left:18%;
    width: 59%;
    height:200%;
    padding: 0%;
}

#header {
    background: url(images/header.gif) repeat-x;
    border: 1px solid black;
    width: 100%;
    height:29px;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 6px;
    font-family: "Lucida Console", "Courier New", sans-serif;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}   

#sidebar {
    background-color: #EEEEEE;
    width: 100%;
    height: 100%;
    padding-left: 3%;
    padding-right: 3%;
    right: 3%;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

#content {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    opacity: 1;
    padding-top: 8px;
}

#post{
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 5px;
    background-color: #FFF;
    opacity: 1;
}

- user1640722

1个回答

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

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

- Lucas Green · Accepted Answer

你要找的是 background-attachment:fixed 而不是 position:fixed，你可以像这样实现你想要的效果：

body{
    background-image:url('images/background.jpg');
    background-position:center top;
    background-attachment:fixed;
    margin: 0px;
    color: #000;
    font-family: helvetica, times;
    font-size: 16px;
}

哦，还需要删除：

<div id="bg">
    <img src="images/background.jpg">
</div>

这是您文档的一部分。